Web Player Overview (VSK Echo Show)
The web player acts as the front end of the video skill.
Introduction
Here is a high level diagram of the web player structure.
The Alexa AI running in the cloud.
This is the customer device (Echo Show) that runs the skill.
An Amazon Alexa library that the web player depends on. The library can facilitate communication between the web player and the device.
The front end of a skill that runs on device. It plays the video, renders the transport controls, and so on.
This component handles events to and from Alexa itself. For example, Alexa sends a play video request (LOAD_CONTENT event).
This component handles events relating to the web player by calling AWS API Gateway. The API Gateway is used as a secure HTTPS endpoint that the web player can call to perform actions such as the following:
- Send video progress updates to the Lambda to support "continue watching" functionality
- Transfer web player logs from the device to CloudWatch Logs during development
- Query the Lambda for the next or previous episode when watching episodic content
The front end of a skill that runs on device. It plays the video, renders the transport controls, and so on.
This component manages playing the actual video and related video events, such as video time updates and video ended events.
This component manages rendering the UI transport controls as well as handling touch screen events, such as the user touches the play button.
The web player is built on a publish/subscribe model. Every controller can listen to, or handle web player events that originate from any other controller.
Manual Installation
Follow these steps if you want to build the web player manually. If you have already performed all the steps in the QuickStart section, you do not have to manually install anything.
- Navigate to
<project-root>/web-player. -
Run
npm run release.This command installs dependencies, cleans the project, runs unit tests, and compiles the code.
The output is written to ./dist with the following contents:
./dist/bin/web-playerThe built web-player files./dist/doc/index.htmlAutogenerated documentation of the code./dist/coverage/index.htmlAn HTML code coverage report
Use
This web player is an important component of every video skill running on Echo Show devices.
It needs to be configured in the skill manifest. You can manually do that in the developer portal; however the infrastructure CLI tool handles this for you.
It also needs to be hosted on the internet. The infrastructure CLI tool automatically hosts the web player on S3. If you want to manually host the web player on S3 instead, ensure that the web player S3 objects are publicly readable.
Features
Here is an outline of the web player's features:
Supported
The web player supports the following:
UI (touch)
- Play
- Pause
- Seek forward/backward
- Seek bar
- Closed captioning
- Next episode
Voice
- Play
- Pause
- Seek forward/backward (for example, say "Alexa fast forward 1 minute")
- Next/Previous episode
Currently Not Supported
Currently, the web player does not support the following:
Voice
- Turning on/off closed captioning by voice
Development
The following steps assume that you already have a video skill for Echo Show devices up and running, and that you want to update the web player.
With the infrastructure CLI tool
- Use the CLI tool's
--update --web-playeroption. - Invoke your skill and observe changes.
Without the infrastructure CLI tool
-
Build the project with
npm run releaseIf you want a faster build that skips unit tests, run
npm run compile. - Manually upload the web player to S3 (located in
./dist/web-player/). - Ensure the S3 objects are publicly readable.
- Invoke your skill and observe changes.
Next Steps
See CLI Tool Reference.
Last updated: Oct 29, 2020