# IVS Player SDK: Video.js Integration
This document describes the most important functions available in the Amazon Interactive Video Service (IVS) Video.js player.
**Latest version of Video.js player integration:** 1.51.0 ([Release Notes](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#apr16-26-player-web-ll))
## Getting Started
Amazon IVS support for Video.js is implemented through a Video.js [tech](https://videojs.com/guides/tech/). We provide support through script tags as well as through an npm module. Amazon IVS supports Video.js versions 7.6.6 and later 7\$1, and 8\$1.
Note that when instantiating the player, the Video.js [sources option](https://videojs.com/guides/options/#sources) is not supported. Instead, instantiate the player normally and call the Video.js `src()` function. If autoplay is enabled, the stream will start playing; otherwise, use `play()` to start playback.
### Demo
The following live demo shows how to use the Video.js integration with script tags from our Content Delivery Network: [Amazon IVS Player Video.js integration](https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276).
### Setup With Script Tag
To set up the Amazon IVS tech using the `script` tag:
1. Include the following tag (for the latest version of the player integration).
```
```
1. Register the tech using the `registerIVSTech` function:
```
registerIVSTech(videojs);
```
where `videojs` is the object provided by Video.js.
1. When creating an instance of the player, add `AmazonIVS` as your first tech in the `techOrder` option.
When instantiating the player, the Video.js [sources option](https://videojs.com/guides/options/#sources) is not supported. Instead, to set the source, instantiate the player normally, then call the Video.js `src()` function on it. If autoplay is enabled, the stream will start playing; otherwise, use `play()` to start playback.
### Sample Code
In this example, `PLAYBACK_URL` is the source stream you want to load. The example uses the latest version of the Amazon IVS Player.
```
```
### Setup With NPM
To use Amazon IVS player through npm:
1. Install the [video.js](https://www.npmjs.com/package/video.js/v/7.6.6) npm package or ensure that your project has some other access to the Video.js library.
1. Install the `amazon-ivs-player` npm package:
```
npm install amazon-ivs-player
```
1. When you’re ready to register the Amazon IVS tech, import the `registerIVSTech` function:
```
import { registerIVSTech } from 'amazon-ivs-player';
```
1. Register the tech using the `registerIVSTech` function:
```
registerIVSTech(videojs, options);
```
where:
+ `videojs` is the object provided by Video.js.
+ `options` is the options for the Amazon IVS tech layer. Supported options are:.
+ `wasmWorker`: URL where the `amazon-ivs-wasmworker.min.js` file is hosted.
+ `wasmBinary`: URL where the `amazon-ivs-wasmworker.min.wasm` file is hosted.
The worker files are in your `node_modules/` folder under `amazon-ivs-player/dist/`. You need to host them, to use the IVS player.
1. When creating an instance of the player, add `AmazonIVS` as your first tech in the `techOrder` option:
```
const player = videojs('videojs-player', {
techOrder: ["AmazonIVS"]
});
```
### TypeScript
If you’re using TypeScript, our npm package includes the following types you may want to import and use.
+ `VideoJSEvents`, which describes the returned structure from `getIVSEvents()`.
+ `VideoJSIVSTech`, which describes the interface to a player instance that uses the `AmazonIVS` tech. This can be [intersected](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) with the `VideoJsPlayer` type exposed by the [@types/video.js](https://www.npmjs.com/package/@types/video.js) npm package.
+ `TechOptions`, which describes the interface defining the configuration options you can send to `registerIVSTech()`.
For more information on these types, see the [Amazon IVS Player SDK: Web Reference](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/).
## Events
To listen to standard Video.js events, use the [on](https://docs.videojs.com/docs/api/player.html#Methodson) function of the Video.js player.
To listen to events that are specific to Amazon IVS, add and remove event listeners on the Amazon IVS Web player:
```
player.getIVSPlayer().addEventListener(event, callback);
player.getIVSPlayer().removeEventListener(event, callback);
```
where `callback` is a callback you define, and `event` is one of: `PlayerEventType` or `PlayerState`. For more information about events, see the [Amazon IVS Player SDK: Web Reference](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/).
## Errors
For general Video.js errors, listen to the generic `error` event on the player:
```
player.on("error", callback);
```
For errors specific to Amazon IVS, listen on the Amazon IVS player for its own errors:
```
let playerEvent = player.getIVSEvents().PlayerEventType;
player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback);
```
The callback will receive an object with the following fields:
| Field | Description |
| --- | --- |
| `type` | The error type. Corresponds to `ErrorType` events. For more information, see [Amazon IVS Player SDK: Web Reference](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). |
| `code` | The error code. |
| `source` | Source of the error. |
| `message` | Human readable error message. |
## Plugins
We provide a plugin that creates a UI toggle for available qualities. To use this plugin, it must be loaded by including the `amazon-ivs-quality-plugin.min.js` file if you are using our tech through the following `script` tag (for the latest version of the IVS Player):
```
```
If you are using npm, import the `registerIVSQualityPlugin` from the `amazon-ivs-player` module:
```
import { registerIVSQualityPlugin } from 'amazon-ivs-player';
```
Then, once you create an instance of your Video.js player, the following calls are required to register and enable it:
```
registerIVSQualityPlugin(videojs); // where videojs is the video.js variable
player.enableIVSQualityPlugin(); // where player is the instance of the videojs player
```
This will create a UI menu button which allows you to select a quality for the stream.
### Plugins and TypeScript
If you’re using TypeScript, our npm package includes the `VideoJSQualityPlugin` type that you may want to import and use with our plugin. Plugins essentially are mixins, so this type interface is to be used as an [intersection type](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) with the `VideoJSIVSTech` typescript interface.
## Content Security Policy
The Amazon IVS Video.js API is configured to work on pages that use Content Security Policy (CSP). See the section on “Working with Content Security Policy” in the [IVS Player SDK: Web Guide](web-content-security-policy.md).
## Functions
### Playback
The Amazon IVS Video.js API supports the necessary interfaces for internal use by the Video.js framework. The client application is not likely to need to use these methods directly, since Video.js does the necessary integration and presents a standard interface. However, if needed, one way to access internal Video.js and Amazon IVS player methods is to use the Video.js player object to get the needed object handle to the tech.
To access the API, retrieve the instance of your Video.js player as you would normally:
```
let player = videojs("videoTagId"); //replace videoTagId with your