Developer Console

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.

WebPlayer Overview
Alexa

The Alexa AI running in the cloud.

Echo Show

This is the customer device (Echo Show) that runs the skill.

Alexa Web Player Controller

An Amazon Alexa library that the web player depends on. The library can facilitate communication between the web player and the device.

Web Player

The front end of a skill that runs on device. It plays the video, renders the transport controls, and so on.

Alexa Controller

This component handles events to and from Alexa itself. For example, Alexa sends a play video request (LOAD_CONTENT event).

API Gateway Controller

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
Web Player

The front end of a skill that runs on device. It plays the video, renders the transport controls, and so on.

Video Controller

This component manages playing the actual video and related video events, such as video time updates and video ended events.

UI Controller

This component manages rendering the UI transport controls as well as handling touch screen events, such as the user touches the play button.

Events

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.

  1. Navigate to <project-root>/web-player.
  2. 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-player The built web-player files
  • ./dist/doc/index.html Autogenerated documentation of the code
  • ./dist/coverage/index.html An 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

  1. Use the CLI tool's --update --web-player option.
  2. Invoke your skill and observe changes.

Without the infrastructure CLI tool

  1. Build the project with npm run release

    If you want a faster build that skips unit tests, run npm run compile.

  2. Manually upload the web player to S3 (located in ./dist/web-player/).
  3. Ensure the S3 objects are publicly readable.
  4. Invoke your skill and observe changes.

Next Steps

See CLI Tool Reference.


Last updated: Oct 29, 2020