

# IVS 播放器 SDK：JW 播放器整合
<a name="player-jwplayer"></a>

本文件說明 Amazon Interactive Video Service (IVS) JW 播放器整合中最重要的功能。

**最新版 JW 播放器整合：**1.50.0 ([版本備註](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#mar19-26-player-web-ll))

## 開始使用
<a name="jwplayer-getting-started"></a>

Amazon IVS 對 JW 播放器的支援是透過 Provider 實現的。僅 JW 播放器的 Web 播放器支援 Amazon IVS Provider。透過指令碼標記載入 Provider，任何需要 Amazon IVS Provider 播放的串流在播放清單中都必須標記有 `type: 'ivs'`。Amazon IVS 支持 JW 播放器 8.18.4 版及更新版本。

### 設定
<a name="jwplayer-getting-started-setup"></a>

在這些說明中，`JW_PLAYER_DIV` 是您的 JW 播放器執行個體的 `<div>` 的名稱，`IVS_STREAM` 是 IVS 播放 URL。若要設定 Amazon IVS Provider 並啟用播放功能：

1. 包含以下 `script` 標籤 (適用於播放器整合的最新版本，在此情況下為 1.50.0)：

   ```
   <script src="https://player.live-video.net/1.50.0/amazon-ivs-jw-provider.min.js"></script>
   ```

1. 使用 `ivs` 類型來標記您的 IVS 播放清單項目。將 `setup()` 中的 `cast` 設為 `null` (因為不支援 Chromecast)。

   ```
   jwplayer(JW_PLAYER_DIV).setup({
      playlist: [{
         file:IVS_STREAM,
         type: 'ivs',
      }]
   });
   ```

1. 如果您想要參考基礎 Amazon IVS 播放器，以進行 Amazon IVS 播放器 API 呼叫，或者您想要參考 Amazon IVS 特定列舉以進行回呼處理，請將接聽程式新增到 `'providerPlayer'` 事件：

   ```
   jwplayer(JW_PLAYER_DIV).on('providerPlayer', function (player) {
      // player object has 'ivsPlayer' and 'ivsEvents' properties
      // ...callback code...
   });
   ```

### 範例程式碼
<a name="jwplayer-getting-started-code"></a>

在此範例中，`JW_PLAYER_LIB` 是您的 JW 播放器程式庫指令碼的 URL，`IVS_STREAM` 是 IVS 播放 URL。

```
<!DOCTYPE html>
<html lang="en">
<head>
   <script src=JW_PLAYER_LIB></script>
   <script src="https://player.live-video.net/1.50.0/amazon-ivs-jw-provider.min.js"></script>
</head>
<body>
   <div id='player'></div>
   <script>
      // set default values for ivsPlayer and ivsEvents
      var ivsPlayer = {};
      var ivsEvents = {};

      // define our player setup
      const ivsConfig = {
         playlist: [{
            file: IVS_STREAM,
            type: 'ivs',
         }]
      };

      jwplayer('player')
         .setup(ivsConfig)
         .on('providerPlayer', function (player) {
            console.log('Amazon IVS Player: ', player.ivsPlayer);
            console.log('Amazon IVS Player Events: ', player.ivsEvents);

            // store the reference to the Amazon IVS Player
            ivsPlayer = player.ivsPlayer;
            // store the reference to the Amazon IVS Player Events
            ivsEvents = player.ivsEvents;
         });
   </script>
</body>
</html>
```

## 活動
<a name="jwplayer-events"></a>

若要接聽標準 JW 播放器事件，請使用 JW 播放器的 [on](https://docs.jwplayer.com/players/docs/jw8-reference#event-listening-with-the-jwp-api) 函數。

若要接聽 Amazon IVS 特定事件，或在 Amazon IVS Web 播放器中新增和移除事件接聽程式，您必須接聽 `'providerPlayer'` 事件以獲取對 Amazon IVS 播放器的參考，然後為其新增事件接聽。例如：

```
// store a default value for ivsPlayer
var ivsPlayer = {};

// store references to the Amazon IVS Player and Amazon IVS Events:
jwplayer(JW_PLAYER_DIV).on('providerPlayer', function (player) {
   ivsPlayer = player.ivsPlayer;
});

// set up event listening
ivsPlayer.addEventListener(event, callback);
ivsPlayer.removeEventListener(event, callback);
```

其中 `callback` 是您定義的回呼，`event` 是以下其中一個：`PlayerEventType`、`PlayerState` 或 `ErrorType`。如需事件的詳細資訊，請參閱 [Amazon IVS 播放器 SDK：Web 參考](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/)。

`'providerPlayer'` 事件由 JW 播放器發出，並且您用它註冊的回呼將收到具有以下欄位的物件：


| 欄位 | 描述 | 
| --- | --- | 
|  `ivsPlayer`  |  傳回基礎的 Amazon IVS 播放器執行個體。透過此執行個體可使用完整的 Amazon IVS 播放器 Web API。我們建議您盡可能使用基本 JW 播放器播放 API，並僅使用此功能來存取 Amazon IVS 特定功能。您可能需要在 Amazon IVS 播放器執行個體上存取的最常見功能是 `addEventListener()` 和 `removeEventListener()`。  | 
|  `ivsEvents`  |  傳回具有 `PlayerEventType`、`PlayerState` 以及 `ErrorType` 欄位的物件，這些欄位映射到其關聯的 Amazon IVS 特定列舉。如需詳細資訊，請參閱 [Amazon IVS 播放器 SDK：Web 參考](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/)。  | 

## 錯誤
<a name="jwplayer-errors"></a>

對於一般 JW 播放器錯誤，請使用 JW 播放器的 [on](https://docs.jwplayer.com/players/docs/jw8-reference#event-listening-with-the-jwp-api) 函數來接聽錯誤事件。

對於 Amazon IVS 特定錯誤，請在 Amazon IVS 播放器上接聽其本身的錯誤：

```
// set default values for ivsPlayer and ivsEvents
var ivsPlayer = {};
var ivsEvents = {};

// store references to the Amazon IVS Player and Amazon IVS Events
jwplayer(JW_PLAYER_DIV).on('providerPlayer', function (player) {
   ivsPlayer = player.ivsPlayer;
   ivsEvents = player.ivsEvents;
});

// set up event listening:
let playerEvent = ivsEvents.PlayerEventType;
ivsPlayer.addEventListener(playerEvent.ERROR, callback);
```

此回呼將收到具有以下欄位的物件：


| 欄位 | 描述 | 
| --- | --- | 
|  `type`  |  錯誤類型。對應 `ErrorType` 事件。如需詳細資訊，請參閱 [Amazon IVS 播放器開發套件：Web 參考](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/)。  | 
|  `code`  |  錯誤代碼。  | 
|  `source`  |  錯誤來源。  | 
|  `message`  |  人類可讀的錯誤訊息。  | 

## 內容安全政策
<a name="jwplayer-content-security-policy"></a>

Amazon IVS Provider API 設定為可在使用內容安全政策 (CSP) 的頁面上運作。請參閱 [IVS 播放器 SDK：Web 指南](web-content-security-policy.md) 中的「使用內容安全政策」章節。

## 限制
<a name="jwplayer-limitations"></a>

Provider 不支援轉換。如果您在 JW 播放器儀表板中啟用了轉換功能，您可以在呼叫 `setup()` 時將 `cast` 設為`null` 來停用它。這會隱藏轉換按鈕。