VideoPlayer with auto-hiding overlay in APL 1.1

videoPlayer-apl1.1-v02.json

{
    "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": "TouchWrapper",
                        "id": "videoWideToggleButton",
                        "width": "100vw",
                        "height": "100vh",
                        "items": [
                            {
                                "type": "Video",
                                "id": "videoPlayer",
                                "width": "100vw",
                                "height": "100vh",
                                "autoplay": true,
                                "audioTrack": "foreground",
                                "source": {
                                    "url": "https://alexa-radio-cow.s3.amazonaws.com/Driving_timelapse_CCBY_NatureClip.mov"
                                },
                                "onPause": [
                                    {
                                        "type": "SetState",
                                        "componentId": "alexaPlayPauseToggleButton",
                                        "state": "checked",
                                        "value": true
                                    },
                                    {
                                        "type": "SetState",
                                        "componentId": "videoWideToggleButton",
                                        "state": "checked",
                                        "value": true
                                    },
                                    {
                                        "type": "SetValue",
                                        "componentId": "overlayContainer",
                                        "property": "display",
                                        "value": "normal"
                                    }
                                ],
                                "onPlay": [
                                    {
                                        "type": "SetState",
                                        "componentId": "alexaPlayPauseToggleButton",
                                        "state": "checked",
                                        "value": false
                                    },
                                    {
                                        "type": "SetState",
                                        "componentId": "videoWideToggleButton",
                                        "state": "checked",
                                        "value": false
                                    },
                                    {
                                        "type": "SetValue",
                                        "componentId": "overlayContainer",
                                        "property": "display",
                                        "value": "normal"
                                    },
                                    {
                                        "type": "SetValue",
                                        "componentId": "overlayContainer",
                                        "property": "display",
                                        "value": "invisible",
                                        "delay": "3000"
                                    }
                                ]
                            }
                        ],
                        "onPress": [
                            {
                                "type": "SetState",
                                "componentId": "alexaPlayPauseToggleButton",
                                "state": "checked",
                                "value": "${!event.source.value}"
                            },
                            {
                                "type": "SetState",
                                "componentId": "videoWideToggleButton",
                                "state": "checked",
                                "value": "${!event.source.value}"
                            },
                            {
                                "when": "${event.source.value}",
                                "type": "ControlMedia",
                                "componentId": "videoPlayer",
                                "command": "play"
                            },
                            {
                                "when": "${!event.source.value}",
                                "type": "ControlMedia",
                                "componentId": "videoPlayer",
                                "command": "pause"
                            }
                        ]
                    },
                    {
                        "type": "Container",
                        "id": "overlayContainer",
                        "position": "absolute",
                        "width": "100vw",
                        "height": "100vh",
                        "alignItems": "center",
                        "items": [
                            {
                                "type": "Text",
                                "text": "Title",
                                "width": "100vw",
                                "fontSize": "8vh",
                                "paddingTop": "3vh",
                                "paddingLeft": "3vh"
                            },
                            {
                                "type": "Text",
                                "text": "Description",
                                "width": "100vw",
                                "fontSize": "5vh",
                                "paddingTop": "1vh",
                                "paddingLeft": "3vh"
                            },
                            {
                                "type": "AlexaTransportControls",
                                "position": "absolute",
                                "bottom": "0",
                                "autoplay": true,
                                "primaryControlSize": "10vh",
                                "secondaryControlSize": "10vh",
                                "mediaComponentId": "videoPlayer",
                                "playPauseToggleButtonId": "alexaPlayPauseToggleButton"
                            }
                        ]
                    }
                ]
            }
        ]
    }
}

To test this APL layout:

• Make sure you have an Alexa developer account and a Alexa device with a screen registered on that account
• Go to https://developer.amazon.com/alexa/console/ask/displays
• Select 'Start from scratch', switch to APL view on the left, and paste the JSON
• You will see the simulated rendering on the right
• You can view it to your device by clicking the button named e.g. "View on Echo Show" at the bottom

Relevant documentation:

• https://developer.amazon.com/docs/alexa-presentation-language/understand-apl.html
• https://developer.amazon.com/docs/alexa-presentation-language/apl-video.html
• https://developer.amazon.com/fr/docs/alexa-presentation-language/apl-transport-controls-layout.html