Transport Controls
Transport Controls
Transport Controlsレイアウトを使うと、再生、一時停止、再開などビデオのコントロール表示を操作できます。
APL応答にレイアウトを追加する方法についての一般的な情報は、レイアウト を参照してください。
Transport Controlsレイアウトを使ってユーザーエクスペリエンスを向上させる方法について詳しくは、デザインガイドのリンク を参照してください。
alexa-layoutsパッケージを読み込む
AlexaTransportControlsを使用するには、alexa-layoutsパッケージを読み込みます 。
alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaTransportControlsはバージョン1.0.0で導入されました。
このページの上部にあるその他のバージョン オプションをクリックすると、別のバージョンのAlexaTransportControlsドキュメントが表示されます。各パラメーターが追加されたalexa-layoutsのバージョンを、パラメーターの表に示します。
Transport Controlsの仕様
次に、Transport Controlsの仕様を示します。
Transport Controlsの仕様を表示／非表示
"AlexaTransportControls" : {
"parameters" : [
{
"name" : "secondaryControls" ,
"type" : "string" ,
"default" : "skip" ,
"description" : "使用する第2コントロールの種類です。デフォルトはskip（早送り、早戻し）です。有効なオプションはskipとnoneです"
},
{
"name" : "primaryControlSize" ,
"type" : "dimension" ,
"default" : "@transportPrimaryButtonSize" ,
"description" : "第1ボタンの幅と高さです"
},
{
"name" : "secondaryControlSize" ,
"type" : "dimension" ,
"default" : "@transportSecondaryButtonSize" ,
"description" : "第2ボタンの幅と高さです"
},
{
"name" : "mediaComponentId" ,
"type" : "string" ,
"description" : "メディアを再生しているコンポーネントのIDです"
},
{
"name" : "autoplay" ,
"type" : "boolean" ,
"default" : false ,
"description" : "再生／停止アイコンの開始状態を決定します。これは、メディア再生コンポーネントの自動再生状態と一致する必要があります。デフォルトはfalseです。"
},
{
"name" : "playPauseToggleButtonId" ,
"type" : "string" ,
"default" : "alexaPlayPauseToggleButton" ,
"description" : "再生／停止切り替えボタンに設定する任意のIDです。これは、それぞれ固有のTransport Controlsを持つ複数のビデオを画面上に表示するときに便利です。
}
]
Transport Controlsレイアウトによる操作
Transport Controlsレイアウトには、複数のコントロールが含まれます。secondaryControls、primaryControlSize、secondaryControlSize、mediaComponentId、autoplay、playPauseToggleButtonIdです。
secondaryControls
名前
型
説明
デフォルト
secondaryControls列挙
使用する第2コントロールの種類です。skipまたはnoneになります。
skip
primaryControlSize
名前
型
説明
デフォルト
primaryControlSizeディメンション 第1ボタンの幅と高さです。
"@transportPrimaryButtonSize"
secondaryControlSize
名前
型
説明
デフォルト
secondaryControlSizeディメンション 第2ボタンの幅と高さです。
"@transportSecondaryButtonSize"
名前
型
説明
デフォルト
mediaComponentId文字列
メディアを再生しているコンポーネントのIDです。
autoplay
名前
型
説明
デフォルト
autoplayブール値
再生／停止 アイコンの開始状態を決定します。この値は、メディア再生コンポーネントの自動再生状態と一致する必要があります。false
名前
型
説明
デフォルト
playPauseToggleButtonId文字列
再生／停止 切り替えボタンに設定する任意のIDです。これは、それぞれ固有のTransport Controlsを持つ複数のビデオを画面上に表示するときに便利です。alexaPlayPauseToggleButton
Transport Controlsレイアウトの例
このAPLドキュメントは、mp4形式のビデオを参照します。
Transport Controlsの例を表示／非表示
{
"type" : "APL" ,
"version" : "1.1" ,
"import" : [
{
"name" : "alexa-layouts" ,
"version" : "1.1.0"
}
],
"mainTemplate" : {
"parameters" : [
"payload"
],
"items" : [
{
"type" : "Container" ,
"direction" : "column" ,
"height" : "100vh" ,
"width" : "100vw" ,
"items" : [
{
"type" : "Video" ,
"height" : "90%" ,
"width" : "100%" ,
"autoplay" : true ,
"audioTrack" : "foreground" ,
"id" : "VideoPlayer" ,
"source" : {
"url" : "https://example.com/video/fun-skyblue-video.mp4"
},
"onPause" : [
{
"type" : "SetState" ,
"componentId" : "alexaPlayPauseToggleButton" ,
"state" : "checked" ,
"value" : true
}
],
"onPlay" : [
{
"type" : "SetState" ,
"componentId" : "alexaPlayPauseToggleButton" ,
"state" : "checked" ,
"value" : false
}
]
},
{
"type" : "Container" ,
"alignItems" : "center" ,
"item" : {
"primaryControlSize" : 50 ,
"secondaryControlSize" : 0 ,
"mediaComponentId" : "VideoPlayer" ,
"type" : "AlexaTransportControls"
}
}
]
}
]
}
}
