ウェブプレーヤーの概要
ウェブプレーヤーは、ビデオスキルのフロントエンドとして機能します。
概要
次の図は、ウェブプレーヤーの基本的な構造を示しています。
クラウドで実行されているAlexa AI。
スキルを実行するユーザーデバイス（Echo Show）。
ウェブプレーヤーが使用するAmazon Alexaライブラリ。このライブラリにより、ウェブプレーヤーとデバイスの間の通信が容易になります。
デバイス上で実行されるスキルのフロントエンド。ビデオの再生やトランスポートコントロールの提供など行います。
このコンポーネントは、Alexaとの間で送受信されるイベントを処理します。たとえば、Alexaはビデオ再生リクエスト（LOAD_CONTENTイベント）を送信します。
このコンポーネントは、AWS API Gatewayを呼び出して、ウェブプレーヤーに関連するイベントを処理します。API Gatewayは安全なHTTPSエンドポイントとして使用され、ウェブプレーヤーから呼び出すことで、次のようなアクションを実行できます。
- ビデオの進行状況の最新情報をLambda関数に送信して、「続きを見る」機能をサポートする
- 開発中、デバイスからAmazon CloudWatch Logsにウェブプレーヤーのログを転送する
- シリーズ物のコンテンツの視聴中に、次または前のエピソードをLambda関数に照会する
デバイス上で実行されるスキルのフロントエンド。ビデオの再生やトランスポートコントロールの提供など行います。
このコンポーネントは、実際のビデオの再生や、関連するビデオイベント（ビデオ再生時間の更新やビデオ終了イベントなど）を管理します。
このコンポーネントは、トランスポートUIコントロールのレンダリングと、ユーザーが再生ボタンに触れた場合などのタッチスクリーンイベントの処理を管理します。
ウェブプレーヤーは、パブリッシュ／サブスクライブモデルで構築されています。すべてのコントローラーは、ほかのコントローラーで発生したウェブプレーヤーイベントをリッスンまたは処理できます。
手動インストール
ウェブプレーヤーを手動でビルドする場合は、以下の手順を実行します。クイックスタートのセクションですべての手順を既に実行している場合は、手動インストールを行う必要はありません。
＜プロジェクトのルート＞/web-playerに移動します。-
npm run releaseを実行します。このコマンドを実行すると、依存関係のインストール、プロジェクトのクリーンアップ、単体テストの実行、コードのコンパイルが行われます。
出力は./distフォルダに書き込まれます。これには次の内容が含まれます。
./dist/bin/web-player：ビルドされたウェブプレーヤーのファイル./dist/doc/index.html：コードに関する自動生成されたドキュメント./dist/coverage/index.html：HTMLコードカバレッジレポート
使用
このウェブプレーヤーは、Echo Showデバイスで実行されるすべてのビデオスキルの重要なコンポーネントです。
ウェブプレーヤーは、スキルマニフェストで構成する必要があります。この構成は開発者ポータルで手動で行うこともできますが、Alexa Video Infrastructure CLIツールを使用すると自動的に処理されます。
また、インターネット上でホストする必要もあります。Alexa Video Infrastructure CLIツールを使用すると、ウェブプレーヤーがS3で自動的にホストされます。S3でのウェブプレーヤーのホストを手動で行う場合は、ウェブプレーヤーのS3オブジェクトが一般に読み取り可能であることを確認してください。
機能
ウェブプレーヤーの機能の概要は次のとおりです。
サポートされている機能
ウェブプレーヤーは、以下の機能をサポートしています。
UI（タッチ）
- 再生
- 一時停止
- 前方または後方にシーク
- シークバー
- クローズドキャプション
- 次のエピソード
音声
- 再生
- 一時停止
- 前方または後方にシーク（例：「アレクサ、1分早送りして」）
- 次または前のエピソード
現在サポートされていない機能
現在、ウェブプレーヤーは以下の機能をサポートしていません。
音声
- 音声によるクローズドキャプションのオンとオフの切り替え
開発
以下の手順では、適切に機能するEcho Showデバイス用ビデオスキルが既にある状態でウェブプレーヤーを更新することを想定しています。
Alexa Video Infrastructure CLIツールを使用する場合
- CLIツールの
--update --web-playerオプションを使用します。 - スキルを呼び出し、変更されているかどうかを確認します。
Alexa Video Infrastructure CLIツールを使用しない場合
-
npm run releaseでプロジェクトをビルドします。すばやくビルドして単体テストをスキップする場合は、
npm run compileを実行します。 - ウェブプレーヤーを手動でS3（
./dist/web-player/）にアップロードします。 - S3オブジェクトが一般に読み取り可能であることを確認します。
- スキルを呼び出し、変更されているかどうかを確認します。
次のステップ
CLIツールリファレンスを参照してください。
