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.