開始使用 IVS Web 播放器 SDK - Amazon IVS
示範使用指令碼標記進行設定範例程式碼使用 NPM 進行設定TypeScript設定服務工作者純音訊播放

開始使用 IVS Web 播放器 SDK

本文件將帶您了解開始使用 Amazon IVS Web 播放器 SDK 的相關步驟。

我們透過 script 標記以及透過 npm 模組提供支援。

示範

下列即時示範展示如何在內容交付網路中使用 Web 播放器與 script 標籤：Amazon IVS Player 範例。此示範包括設定事件接聽程式。

另外，如需選取其他 Web 播放器示範，請參閱 https://github.com/aws-samples/amazon-ivs-player-web-sample。

使用指令碼標記進行設定

若要使用 script 標記設定 Amazon IVS 播放器：

  1. 包含下列標記 (適用於最新版本的播放器)。

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

  2. 加載 amazon-ivs-player.min.js 之後，它會將一個 IVSPlayer 變數新增至全域內容。這是您要用來建立播放器執行個體的程式庫。首先，檢查 isPlayerSupported 以確定瀏覽器是否支援 IVS 播放器：

    if (IVSPlayer.isPlayerSupported) { ... }

    然後，若要建立播放器執行個體，請呼叫 IVSPlayer 物件上的 create 函數。

    const player = IVSPlayer.create();

    Amazon IVS Web 播放器 SDK 會利用 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.37.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。

備註：從您自己的網域託管播放器靜態資產時，您必須將 WebAssembly 二進位檔 (amazon-ivs-wasmworker.min.wasm) 的「Content-Type」回應標頭設定為「application/wasm」。此外，您必須將資產 gzip 化，以減少透過連線下載的位元組，並改善播放器開始播放的時間。

TypeScript

如果您使用的是 TypeScript，npm 套件包含您可能想要匯入和使用的類型。如需這些類型的詳細資訊，請參閱 Amazon IVS 播放器 SDK：Web 參考。

設定服務工作者

為了進一步降低透過僅支援原生播放的瀏覽器 (主要是 iOS Safari) 播放時的延遲，可以設定和配置服務工作者。如需詳細資訊，請參閱在第三方播放器中降低延遲。

若要設定 Amazon IVS 播放器來使用服務工作者：

  1. 建立檔案以從 CDN 減輕 IVS 服務工作者的負載。這是必需的，因為服務工作者必須在與提取它們的頁面相同的網域上託管。

    建立名為 amazon-ivs-service-worker-loader.js 或類似的檔案，並新增以下一行：

    importScripts('https://player.live-video.net/1.37.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. 在影片元素上，將 crossOrigin 屬性設定為 anonymous。這是允許服務工作者對清單檔案進行變更的必要動作。

注意：要在本機測試服務工作者，該頁面需要透過 localhost 或 https 提供服務。

如需現場展示，請參閱下列儲存庫中的服務工作者範例：

https://github.com/aws-samples/amazon-ivs-player-web-sample

純音訊播放

純音訊品質必須透過 setQuality() 方法手動選取。請注意，此播放器不支援第二個引數 adaptive 的 true 值，因此該引數依預設為 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 內設定品質適用於自動播放和非自動播放模式。