Transport Controls are a set of functions 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 voice-forward, you will need to build in the ability for customers to play video through touch and voice.
The Transport Controls responsive component provides you with a default set of on-screen controls which you can easily include in your screen layout. The default appearance of the control 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 primary and secondary controls. Play/Pause is the primary button. Back and Next are the default secondary controls to select other videos in a series or to skip through parts of a video currently being viewed.
How to use transport controls
The default set of controls includes the most commonly used actions: Play/Pause, Back and Next. You can customize the size of primary and secondary controls, and the choice of which secondary controls to include. These on-screen controls should be used in addition to, not instead of, voice controls for media playback. Play and Pause buttons are mandatory, but other buttons can be added for additional functionality. Additionally, your control buttons should be large enough to see and interact with the touch target. Remember that your video may be viewed on smaller device modes, so you will need to scale your controls accordingly.
When creating custom functionality, consider commonly used iconography used traditionally in video players or online media players so customers don’t have to relearn how to interact with the video content. Likewise, allow for a wide range of utterances to control playback when the customer uses voice instead. For example, a customer might say “play the next one” or “skip” to mean that they want to view the next video in a series.
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, your video content playback should start automatically rather than requiring the customer to press play.
- 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 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.