Transport Controls
You can control the appearance of the controls for your video–such as Play, Pause, Restart–with the Transport Controls layout.
For general information about how to include layouts in your APL responses, see Layouts.
For information about how to develop the best customer experience using the transport control layout, see Design Guide Links.
Import the alexa-layouts package
To use AlexaTransportControls, import the alexa-layouts package.
The latest version of the alexa-layouts package is 1.1.0. AlexaTransportControls was introduced in version 1.0.0.
Use the Other Versions option at the top of this page to see documentation for different versions of AlexaTransportControls. The table of parameters notes the version of alexa-layouts in which each parameter was added.
Transport controls specification
The complete transport controls specification is shown here.
Transport Controls layout controls
The Transport Controls layout includes several controls: secondaryControls, primaryControlSize, secondaryControlSize, mediaComponentId, autoplay, and playPauseToggleButtonId.
secondaryControls
| Name | Type | Description | Default |
|---|---|---|---|
secondaryControls |
enum | Type of secondary controls to use. One of: skip | none |
skip |
primaryControlSize
| Name | Type | Description | Default |
|---|---|---|---|
primaryControlSize |
dimension | Height and width for the primary button | "@transportPrimaryButtonSize" |
secondaryControlSize
| Name | Type | Description | Default |
|---|---|---|---|
secondaryControlSize |
dimension | Height and width for the secondary button | "@transportSecondaryButtonSize" |
mediaComponentId
| Name | Type | Description | Default |
|---|---|---|---|
mediaComponentId |
string | Id of the media-playing component |
autoplay
| Name | Type | Description | Default |
|---|---|---|---|
autoplay |
boolean | Determines the starting state of the Play/Pause icon. This value should match the autoplay state of the media-playing component. | false |
playPauseToggleButtonId
| Name | Type | Description | Default |
|---|---|---|---|
playPauseToggleButtonId |
string | Optional id to set on the Play/Pause toggle button. This is useful when displaying multiple videos on one screen, each with their own transport controls. | alexaPlayPauseToggleButton |
Transport Controls layout example
This APL document references a video in mp4 format.
