開始方法

当社は、script タグ、ならびに npm モジュールを介してサポートを提供しています。

デモ

次のライブデモでは、この Web プレイヤーを、Content Delivery Network の scriptタグを用いて使用する方法を紹介しています。Amazon IVS Player Sample

スクリプトタグを使ってセットアップする

script タグを使用して Amazon IVS プレイヤーを設定する

1. 次のタグを含めます (最新バージョンのプレイヤーの場合)。

   <script src="https://player.live-video.net/1.24.0/amazon-ivs-player.min.js">

2. amazon-ivs-player.min.js がロードされると、IVSPlayer 変数がグローバルコンテキストに追加されます。これは、プレイヤーインスタンスの作成に使用するライブラリです。まず、isPlayerSupported をチェックして、ブラウザが IVS プレイヤーをサポートしているか確認します。

   if (IVSPlayer.isPlayerSupported) { ... }

   次に、プレイヤーインスタンスを作成するために、IVSPlayer オブジェクトで create 関数を呼び出します。

   const player = IVSPlayer.create();

   Amazon IVS Player SDK for Web は、ウェブワーカーを使用して動画の再生を最適化します。

3. プレイヤーインスタンスで load および play 関数を使用してストリームをロードし、再生します。

   player.load("PLAYBACK_URL");
   player.play();

   この場合、PLAYBACK_URL は、ストリームキーがリクエストされたときに Amazon IVS API から返される URL です。

サンプルコード

この例では、PLAYBACK_URL をロードしたいソースストリームの URL に置き換えてください。この例では、Amazon IVS プレイヤーの最新バージョンを使用しています。

<script src="https://player.live-video.net/1.24.0/amazon-ivs-player.min.js"></script>
<video id="video-player" playsinline></video>
<script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create();
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.load("PLAYBACK_URL");
    player.play();
  }
</script>

<video> タグでは、iOS Safari でのインライン再生に playsinline が必要です。https://webkit.org/blog/6784/new-video-policies-for-ios/ を参照してください。

NPM でセットアップする

Webpack 設定ファイルの例を含むガイダンスについては、次のリポジトリを参照してください: https://github.com/aws-samples/amazon-ivs-player-web-sample。

注： 独自のドメインからプレイヤーの静的アセットをホストする場合は、バイナリ (amazon-ivs-wasmworker.min.wasm) の「Content-Type WebAssembly」レスポンスヘッダーを「application/wasm」に設定する必要があります。また、アセットを gzip して、ワイヤ経由でダウンロードされるバイト数を減らし、プレーヤーの再生開始時間を短縮する必要があります。

TypeScript

を使用している場合 TypeScript、npm パッケージにはインポートして使用できるタイプが含まれます。これらのタイプに関する詳細については、「Amazon IVS Player SDK: Web Reference」を参照してください。

サービスワーカーの設定

ネイティブの再生機能のみをサポートするブラウザ (主として iOS Safari) で再生する場合は、サービスワーカーをセットアップして構成することで、レイテンシーをさらに低くすることができます。詳細については、「サードパーティ製プレーヤーのレイテンシーの削減」を参照してください。

サービスワーカーを使用するために Amazon IVS プレイヤーをセットアップするには

1. CDN からの IVS サービスワーカーの読み込先となるファイルを作成します。サービスワーカーと、それを取得するページは、同じドメインでホストされている必要があるため、このファイルが必要です。

   amazon-ivs-service-worker-loader.js または類似の名前でファイルを作成し、次の行を追加します。

   importScripts('https://player.live-video.net/1.24.0/amazon-ivs-service-worker.min.js');

2. プレイヤーインスタンスを作成するときに、次の amazon-ivs-service-worker-loader.js ファイルを参照する serviceWorker 設定を渡します。

   const player = IVSPlayerPackage.create({
      serviceWorker: {
         url: 'amazon-ivs-service-worker-loader.js'
      }
   });

3. video 要素で、crossOrigin 属性に anonymous を設定します。これは、サービスワーカーがマニフェストを変更できるようにするために必要です。

注: サービスワーカーをローカルでテストするには、ページを localhost または https から提供する必要があります。

ライブデモについては、以下のリポジトリにあるサービスワーカーの例を参照してください。

https://github.com/aws-samples/amazon-ivs-player-web サンプル

オーディオのみの再生

オーディオのみの品質は、 setQuality()メソッドで手動で選択する必要があります。プレイヤーは 2 番目の引数 trueの値をサポートしていないためadaptive、この引数はデフォルトで であることに注意してくださいfalse。

再生を開始する前に品質をオーディオのみに設定するには、READYイベントsetQuality()内で を呼び出します。

player.addEventListener(PlayerState.READY, () => {
   const qualities = player.getQualities();
   const audioOnly = qualities.find(q => q.name === 'audio_only');
   if (audioOnly) {
      player.setQuality(audioOnly);
   }
});

内で品質を設定することは、自動再生モードと非自動再生モードの両方でREADY機能します。