# IVS 回放器 SDK：Video.js 集成
本文档介绍了 Amazon Interactive Video Service (IVS) Video.js 播放器中最重要的功能。
**Video.js 播放器集成的最新版本：**1.51.0（[发布说明](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#apr16-26-player-web-ll)）
## 开始使用
Amazon IVS 对 Video.js 的支持是通过 Video.js [技术](https://videojs.com/guides/tech/)实现的。我们通过脚本标签以及 npm 模块提供支持。Amazon IVS 支持 Video.js 版本 7.6.6 以及更高的 7\* 和 8\* 版本。
请注意，在实例化播放器时，Video.js [源选项](https://videojs.com/guides/options/#sources)不受支持。相反，请正常实例化播放器并调用 Video.js `src()` 函数。如果启用了自动播放，则流将开始播放；否则，使用 `play()` 以开始播放。
### 演示
以下现场演示展示了如何使用 Video.js 集成与我们的内容分发网络中的脚本标签：[Amazon IVS 播放器 Video.js 集成](https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276)。
### 使用脚本标签进行设置
要使用 `script` 标签设置 Amazon IVS 技术，请执行以下操作：
1. 包含以下标签（针对最新版本的播放器集成）。
```
```
1. 使用 `registerIVSTech` 函数注册技术：
```
registerIVSTech(videojs);
```
其中 `videojs` 是 Video.js 提供的对象。
1. 创建播放器的实例时，添加 `AmazonIVS` 作为 `techOrder` 选项中的第一个技术。
当实例化播放器时，Video.js [源选项](https://videojs.com/guides/options/#sources)不受支持。相反，要设置源代码，请正常实例化播放器，然后调用 Video.js `src()` 函数。如果启用了自动播放，则流将开始播放；否则，使用 `play()` 以开始播放。
### 示例代码
在此示例中，`PLAYBACK_URL` 是要加载的源流。此示例使用最新版本的 Amazon IVS 播放器。
```
```
### 使用 NPM 进行设置
要通过 npm 使用 Amazon IVS 播放器，请执行以下操作：
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 技术时，请导入 `registerIVSTech` 函数：
```
import { registerIVSTech } from 'amazon-ivs-player';
```
1. 使用 `registerIVSTech` 函数注册技术：
```
registerIVSTech(videojs, options);
```
其中：
+ `videojs` 是 Video.js 提供的对象。
+ `options` 是 Amazon IVS 技术层的选项。支持的选项为：
+ `wasmWorker`：托管 `amazon-ivs-wasmworker.min.js` 文件的 URL。
+ `wasmBinary`：托管 `amazon-ivs-wasmworker.min.wasm` 文件的 URL。
工作线程文件位于 `amazon-ivs-player/dist/` 下的 `node_modules/` 文件夹中。您需要托管它们以使用 IVS 播放器。
1. 创建播放器的实例时，添加 `AmazonIVS` 作为 `techOrder` 选项中的第一个技术：
```
const player = videojs('videojs-player', {
techOrder: ["AmazonIVS"]
});
```
### TypeScript
如果您使用的是 TypeScript，我们的 npm 软件包包含您可能需要导入和使用的以下类型。
+ `VideoJSEvents`，描述了从 `getIVSEvents()` 返回的结构。
+ `VideoJSIVSTech`，描述了使用 `AmazonIVS` 技术的播放器实例的接口。此值可以与 [@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 回放器 SDK：Web 参考](https://aws.github.io/amazon-ivs-player-docs/1.51.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 回放器 SDK：Web 参考](https://aws.github.io/amazon-ivs-player-docs/1.51.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 回放器 SDK：Web 参考](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/)。 |
| `code` | 错误代码。 |
| `source` | 错误源。 |
| `message` | 人类可读的错误消息。 |
## 插件
我们提供了一个插件，可为可用质量创建 UI 切换。要使用此插件，如果您通过以下 `script` 标签使用我们的技术，则必须通过包含 `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 接口的[相交类型](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types)。
## 内容安全策略
Amazon IVS Video.js API 配置为在使用内容安全策略 (CSP) 的页面上工作。请参阅 [IVS 播放器 SDK：Web 指南](web-content-security-policy.md) 中的“使用内容安全策略”章节。
## 函数
### 播放
Amazon IVS Video.js API 支持 Video.js 框架内部使用的必要接口。客户端应用程序不太可能需要直接使用这些方法，因为 Video.js 进行了必要的集成并提供了一个标准接口。但是，如果需要，访问内部 Video.js 和 Amazon IVS 播放器方法的一种方式是使用 Video.js 播放器对象获取技术所需的对象句柄。
要访问 API，请像平常一样检索 Video.js 播放器的实例：
```
let player = videojs("videoTagId"); //replace videoTagId with your