Transport Controls

Transport Controls are a set of buttons with corresponding actions used to control media playback, such as videos or music. The actions, such as Play, Pause, and Skip, represent typical media controls. However, since Alexa is a voice-forward platform, customers can control media playback by both touch and voice.

Still image example of Transport Controls over a video

The APL Transport Controls layout provides you with a default set of on-screen buttons which you can easily include in your screen layout. The default appearance of the button icons should be instantly familiar to your customers, and easy to understand and use. Moreover, they provide a visual cue to remind your customers which voice commands are available at specific times.

The Transport Controls layout contains a default set of 3 buttons: Play/Pause is the primary button. Skip Back and Skip Forward are the default secondary buttons.

Default Transport Controls

Use transport controls

The APL Transport Controls Layout documentation contains information about using the layout. The default set of buttons includes the most commonly used actions: Play/Pause, Skip Back, and Skip Forward. You can customize the size of primary and secondary buttons, and the choice of which secondary buttons to include.

These on-screen buttons should be used in addition to, not instead of, voice controls for media playback.

Best practices

  • Consider how your playback controls will behave as a video starts and stops. While the customer should have control over media playback at all times, if your media is set to full screen, we recommend starting video content playback automatically rather than requiring the customer to press play. For additional guidance on recommended video behaviors, see [Video article].
  • If video media is full-screen, we recommend placing the Transport Controls in the middle of the screen. This makes the controls easier to touch for the customer. It also more easily scales across a range of device types.
  • If the Transport Controls will appear over video content, consider making the controls disappear or fade out after a short amount of time. Likewise, the controls should reappear when the customer touches the screen or otherwise interacts with the device or media playback. When visible, the icons appearing in front of video should make use of opacity and overlays or scrims (for example a 60% black scrim) to distinguish the controls from the video content.
  • If the Transport Controls will appear below video content, ensure the background has enough color contrast to highlight the Transport Controls.
  • You must provide at least the primary Play/Pause button. You might include different controls based on the context, video content, or desired experience. Whenever possible and appropriate, allow the customer to replay the media.
  • If you do not use the default icons for your Transport Controls, use common, easily recognizable icons for the controls. Likewise, allow the customer to use a range of familiar terms to control playback when using voice.
  • Don't make Transport Control buttons so small that customers might have trouble interacting with the touch target. Remember that your experience might appear on a range of smaller devices, and implement good accessibility practices. For specifics, refer to the TouchWrapper limitations.

Additional resources

Back to top