# IVS Player SDK: Video.js の統合このドキュメントは、Amazon Interactive Video Service (IVS) Video.js プレイヤーで利用できる最も重要な機能について説明しています。 **Video.js プレイヤー統合の最新バージョン:** 1.50.0 ([リリースノート](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#mar19-26-player-web-ll)) ## 開始方法 Amazon IVS の Video.js のサポートは、Video.js [tech](https://videojs.com/guides/tech/) を通じて実装されています。サポートは、スクリプトタグと npm モジュールを介して提供されています。Amazon IVS は、Video.js バージョン 7.6.6 とそれ以降の 7\$1 および 8\$1をサポートしています。 Video.js の[ソースオプション](https://videojs.com/guides/options/#sources)はサポートされていませんので、プレイヤーをインスタンス化するときはご注意ください。代わりに、プレイヤーを通常どおりにインスタンス化し、Video.js の `src()` 関数を呼び出します。自動再生が有効になっていると、ストリームの再生が開始されます。開始されない場合は、`play()` を使って再生を開始します。 ### デモ以下のライブデモでは、[Amazon IVS Player Video.js 統合](https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276)を、当社のコンテンツ配信ネットワークのスクリプトタグと一緒に使用する方法を紹介しています。 ### スクリプトタグを使ってセットアップする `script` タグを使って Amazon IVS tech をセットアップするには 1. 次のタグを含めます (プレイヤー統合の最新バージョン向け)。 ``` ``` 1. `registerIVSTech` 関数を使って tech を登録します。 ``` registerIVSTech(videojs); ``` `videojs` は、Video.js から提供されたオブジェクトです。 1. プレイヤーのインスタンスを作成するときは、`AmazonIVS` を最初の tech として `techOrder` オプションに追加します。プレイヤーをインスタンス化するとき、Video.js の[ソースオプション](https://videojs.com/guides/options/#sources)はサポートされません。代わりに、ソースを設定し、プレイヤーを通常通りインスタンス化して、Video.js の `src()` 関数を呼び出します。自動再生が有効になっていると、ストリームの再生が開始されます。開始されない場合は、`play()` を使って再生を開始します。 ### サンプルコード以下の例では、`PLAYBACK_URL` がロードするソースストリームです。この例では、Amazon IVS Player の最新バージョンを使用しています。 ```

``` ### NPM でセットアップする Amazon IVS プレイヤーを npm から使用するには 1. [video.js](https://www.npmjs.com/package/video.js/v/7.6.6) npm パッケージをインストールするか、自分のプロジェクトに Video.js ライブラリへの他のアクセス方法があることを確認します。 1. `amazon-ivs-player` npm パッケージをインストールします。 ``` npm install amazon-ivs-player ``` 1. Amazon IVS tech を登録する準備ができたら、`registerIVSTech` 関数をインポートします。 ``` import { registerIVSTech } from 'amazon-ivs-player'; ``` 1. `registerIVSTech` 関数を使って tech を登録します。 ``` registerIVSTech(videojs, options); ``` 各パラメータの意味は次のとおりです。 + `videojs` が、Video.js から提供されたオブジェクトである。 + `options` が、Amazon IVS tech レイヤーのオプションである。サポートされているオプションは次のとおりです。 + `wasmWorker`: `amazon-ivs-wasmworker.min.js` ファイルがホストされている URL。 + `wasmBinary`: `amazon-ivs-wasmworker.min.wasm` ファイルがホストされている URL。 Worker ファイルは、`amazon-ivs-player/dist/` の下の `node_modules/` フォルダにあります。IVS プレイヤーを使用するときは、これらをホストする必要があります。 1. プレイヤーのインスタンスを作成するときは、`AmazonIVS` を最初の tech として `techOrder` オプションに追加します。 ``` const player = videojs('videojs-player', { techOrder: ["AmazonIVS"] }); ``` ### TypeScript TypeScript を使用している場合、npm パッケージには、インポートして使用できる次のタイプが含まれています。 + `VideoJSEvents`、`getIVSEvents()` から返された構造を記述している。 + `VideoJSIVSTech`、`AmazonIVS` tech を使用しているプレイヤーインスタンスのインターフェイスを記述している。これは、[@types/video.js](https://www.npmjs.com/package/@types/video.js) npm パッケージが公開している `VideoJsPlayer` タイプと[部分的に重なっている](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types)場合があります。 + `TechOptions`、`registerIVSTech()` に送信できる設定オプションを定義するンターフェイスを記述している。上記タイプの詳細については、「[Amazon IVS Player SDK: Web Reference](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/)」を参照してください。 ## Events 標準の Video.js イベントをリッスンするには、Video.js プレイヤーの [on](https://docs.videojs.com/docs/api/player.html#Methodson) 関数を使用します。 Amazon IVS に固有のイベントをリッスンするには、Amazon IVS Web プレイヤーでイベントリスナーを追加および削除します。 ``` player.getIVSPlayer().addEventListener(event, callback); player.getIVSPlayer().removeEventListener(event, callback); ``` この場合、`callback` はユーザーが定義するコールバックで、`event` は、`PlayerEventType` および `PlayerState` のいずれかです。イベントの詳細については、「[Amazon IVS Player SDK: Web Reference](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/)」を参照してください。 ## エラー Video.js の一般的なエラーについては、プレイヤー上で汎用の `error` イベントをリッスンします。 ``` player.on("error", callback); ``` Amazon IVS 固有のエラーについては、Amazon IVS プレイヤーでその固有のエラーをリッスンします。 ``` let playerEvent = player.getIVSEvents().PlayerEventType; player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback); ``` コールバックは、次のフィールドを持つオブジェクトを受け取ります。 | フィールド | 説明 | | --- | --- | | `type` | エラータイプ。`ErrorType` イベントに対応しています。詳細については、「[Amazon IVS Player SDK: Web Reference](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/)」を参照してください。 | | `code` | エラーコードです。 | | `source` | エラーのソース。 | | `message` | 人が判読できるエラーメッセージ。 | ## プラグイン当社は、利用可能な品質のための UI のトグルを作成するプラグインを提供しています。このプラグインを使用するには、次の `script` タグを通じて当社の tech 使用している場合は、`amazon-ivs-quality-plugin.min.js` ファイルを含めてロードする必要があります (IVS プレイヤーの最新バージョンの場合)。 ``` ``` npm を使用している場合は、`amazon-ivs-player` モジュールから `registerIVSQualityPlugin` をインポートします。 ``` import { registerIVSQualityPlugin } from 'amazon-ivs-player'; ``` 次に、Video.js プレイヤーのインスタンスを作成したら、これを登録して有効にするために次の呼び出しを行います。 ``` registerIVSQualityPlugin(videojs); // where videojs is the video.js variable player.enableIVSQualityPlugin(); // where player is the instance of the videojs player ``` これで、ストリームの品質を選択できる UI メニューのボタンが作成されます。 ### プラグインと TypeScript TypeScript を使用している場合、npm パッケージには、インポートしてプラグインで使用できる`VideoJSQualityPlugin` タイプが含まれています。プラグインは実質的に mixin であるため、このタイプのインターフェイスは、`VideoJSIVSTech` TypeScript インターフェイスでは [intersection タイプ](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types)として使用されます。 ## コンテンツセキュリティポリシー Amazon IVS Video.js API は、コンテンツセキュリティポリシー (CSP) を使用しているページで動作するように設定されています。[IVS Player SDK: ウェブガイド](web-content-security-policy.md) の「コンテンツセキュリティポリシーの操作」のセクションを参照してください。 ## 関数 ### 再生 Amazon IVS Video.js API は、Video.js フレームワークによる内部使用に必要なインターフェイスをサポートしています。クライアントアプリケーションでは、おそらく、これらのメソッドを直接使用する必要はありません。Video.js が必要な統合を行い、標準のインターフェイスを表示するためです。ただし、必要に応じて内部の Video.js および Amazon IVS プレイヤーメソッドにアクセスするときは、Video.js プレイヤーオブジェクトを使用して必要なオブジェクトハンドルを tech に付与するのが 1 つの方法です。 API にアクセスするには、通常どおり Video.js プレイヤーのインスタンスを取得します。 ``` let player = videojs("videoTagId"); //replace videoTagId with your