Transport Controls

(This is not the most recent version of AlexaTransportControls. Use the Other Versions option to see the documentation for the most recent version of AlexaTransportControls)

The Alexa transport controls responsive component (AlexaTransportControls) displays a set of video player controls. You can customize the appearance of the buttons and define the commands to run when the user select the buttons.

For information about how to develop the best customer experience using the transport controls, see Transport Controls.

Import the alexa-layouts package

To use AlexaTransportControls, import the alexa-layouts package.

The latest version of the alexa-layouts package is 1.4.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.

AlexaTransportControls parameters

All parameters except type are optional.

Name Type Default Description Version added/updated

autoplay

Boolean

false

Determines the starting state of the play/pause icon. This should match the autoplay state of the media playing component.

1.0.0

mediaComponentId

String

none

The id of the media playing component. For example, the id for the Video component that displays the video to control.

1.0.0

playPauseToggleButtonId

String

alexaPlayPauseToggleButton

Optional id for the the Play/Pause toggle button. Use this property to identify the transport controls component in other commands, such as the onPlay / onPause handlers in the Video component. You must also set unique identifiers when you display multiple instances of AlexaTransportControls on the same screen.

1.0.0

primaryControlSize

Dimension

@transportPrimaryButtonSize

The height and width for the primary button.

1.0.0

secondaryControlSize

Dimension

@transportSecondaryButtonSize

The height and width for the secondary buttons.

1.0.0

secondaryControls

String

skip

The type of secondary controls to use. Valid options are skip | none.

1.0.0

AlexaTransportControls example

This APL document references a video in mp4 format.