# IVS Player SDK: Video.js-Integration In diesem Dokument werden die wichtigsten Funktionen beschrieben, die im Player „Amazon Interactive Video Service (IVS) Video.js“ verfügbar sind. **Neueste Version der Video.js-Player-Integration:** 1.51.0 ([Versionshinweise](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#apr16-26-player-web-ll)) ## Erste Schritte Die Amazon IVS-Support für Video.js wird durch eine Video.js-[Tech](https://videojs.com/guides/tech/) implementiert. Wir bieten Support durch Script-Tags sowie durch ein npm-Modul. Amazon IVS unterstützt Video.js 7.6.6 und neuere 7\*- und 8\*-Versionen. Beachten Sie, dass beim Instanziieren des Players die [Option Video.js-Quellen](https://videojs.com/guides/options/#sources) nicht unterstützt wird. Stattdessen instanziieren Sie den Player normal und rufen die Video.js `src()`-Funktion auf. Wenn die automatische Wiedergabe aktiviert ist, wird der Stream wiedergegeben. Andernfalls verwenden Sie `play()`, um die Wiedergabe zu starten. ### Demo Die folgende Live-Demo zeigt, wie Sie die Video.js Integration mit Skript-Markierungen aus unserem Content Delivery Network verwenden: [Amazon-IVS-Player-Video.js-Integration](https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276). ### Setup mit Skript-Tag So richten Sie die Amazon IVS-Technologie mithilfe des `script`-Tags ein: 1. Fügen Sie das folgende Tag hinzu (für die neueste Version der Player-Integration). ``` ``` 1. Registrieren Sie die Technik mit der `registerIVSTech`-Funktion: ``` registerIVSTech(videojs); ``` wobei `videojs` das von Video.js bereitgestellte Objekt ist. 1. Wenn Sie eine Instance des Players erstellen, fügen Sie `AmazonIVS` als ersten Tech in der `techOrder`-Option hinzu. Beim Instanziieren des Players wird die [Option Video.js-Quellen](https://videojs.com/guides/options/#sources) nicht unterstützt. Um die Quelle festzulegen, instanziieren Sie stattdessen den Player normal und rufen dann die Video.js-Funktion `src()` auf. Wenn die automatische Wiedergabe aktiviert ist, wird der Stream wiedergegeben. Andernfalls verwenden Sie `play()`, um die Wiedergabe zu starten. ### Beispiel-Code In diesem Beispiel ist `PLAYBACK_URL` der Quellstream, den Sie laden möchten. Im Beispiel wird die neueste Version des Amazon IVS Players verwendet. ```

``` ### Einrichtung mit NPM So verwenden Sie Amazon IVS Player über npm: 1. Installieren Sie das [video.js](https://www.npmjs.com/package/video.js/v/7.6.6) npm-Paket oder stellen Sie sicher, dass Ihr Projekt einen anderen Zugriff auf die Bibliothek Video.js hat. 1. So installieren Sie das `amazon-ivs-player`-CLI-Paket: ``` npm install amazon-ivs-player ``` 1. Wenn Sie bereit sind, die Amazon IVS-Technologie zu registrieren, importieren Sie die `registerIVSTech`-Funktion: ``` import { registerIVSTech } from 'amazon-ivs-player'; ``` 1. Registrieren Sie die Technik mit der `registerIVSTech`-Funktion: ``` registerIVSTech(videojs, options); ``` Wobei: + `videojs` ist das Objekt, das von Video.js bereitgestellt wird. + `options` ist die Optionen für den technischen Layer von Amazon IVS. Unterstützte Optionen sind: + `wasmWorker`: URL, bei der die `amazon-ivs-wasmworker.min.js`-Datei gehostet wird. + `wasmBinary`: URL, bei der die `amazon-ivs-wasmworker.min.wasm`-Datei gehostet wird. Die Worker-Dateien befinden sich in Ihrem `node_modules/`-Ordner unter `amazon-ivs-player/dist/`. Sie müssen sie hosten, um den IVS-Player zu verwenden. 1. Wenn Sie eine Instance des Players erstellen, fügen Sie `AmazonIVS` als Ihre erste Technologie in der `techOrder`-Option hinzu: ``` const player = videojs('videojs-player', { techOrder: ["AmazonIVS"] }); ``` ### TypeScript Wenn Sie TypeScript verwenden, enthält unser npm-Paket die folgenden Typen, die Sie importieren und verwenden möchten. + `VideoJSEvents`, welche die zurückgegebene Struktur von beschreibt `getIVSEvents()`. + `VideoJSIVSTech`, der die Schnittstelle zu einer Player-Instance beschreibt, welche die `AmazonIVS`-Technologie verwendet. Dieser kann mit dem vom npm-Paket [@types/video.js](https://www.npmjs.com/package/@types/video.js) bereitgestellten `VideoJsPlayer`-Typ [gekreuzt](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) werden. + `TechOptions`, welche die Schnittstelle beschreibt, die die Konfigurationsoptionen definiert, die Sie an senden können `registerIVSTech()`. Weitere Informationen zu diesen Typen finden Sie in [Amazon IVS Player SDK: Webreferenz](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). ## Ereignisse Um Standard-Ereignisse von Video.js zu hören, verwenden Sie die [an](https://docs.videojs.com/docs/api/player.html#Methodson)-Funktion des Players „Video.js“. Um Ereignisse zu hören, die für Amazon IVS spezifisch sind, fügen Sie Ereignis-Listener auf dem Amazon IVS Web Player hinzu und entfernen Sie sie: ``` player.getIVSPlayer().addEventListener(event, callback); player.getIVSPlayer().removeEventListener(event, callback); ``` wobei `callback` ein Callback ist, den Sie definieren, und `event` einer hiervon ist: `PlayerEventType` oder `PlayerState`. Weitere Informationen zu Ereignissen finden Sie in [Amazon IVS Player SDK: Webreferenz](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). ## Fehler Für allgemeine Video.js-Fehler hören Sie das generische `error`-Ereignis auf dem Player: ``` player.on("error", callback); ``` Bei Fehlern, die für Amazon IVS spezifisch sind, hören Sie den Amazon IVS-Player auf seine eigenen Fehler: ``` let playerEvent = player.getIVSEvents().PlayerEventType; player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback); ``` Der Callback erhält ein Objekt mit den folgenden Feldern: | Feld | Beschreibung | | --- | --- | | `type` | Der Fehlertyp. Entspricht `ErrorType`-Ereignissen. Weitere Informationen finden Sie unter [Amazon IVS Player SDK: Webreferenz](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). | | `code` | Der Fehlercode. | | `source` | Quelle des Fehlers. | | `message` | Menschlich lesbare Fehlermeldung. | ## Plugins Wir bieten ein Plugin, das einen Benutzeroberflächen-Toggle für verfügbare Qualitäten erstellt. Um dieses Plugin zu verwenden, muss es einschließlich der `amazon-ivs-quality-plugin.min.js`-Datei geladen werden, wenn Sie unsere Technologie über das folgenden`script`-Tag (für die neueste Version des IVS Players) verwenden: ``` ``` Wenn Sie npm verwenden, importieren Sie die `registerIVSQualityPlugin` aus dem `amazon-ivs-player`-Modul: ``` import { registerIVSQualityPlugin } from 'amazon-ivs-player'; ``` Nachdem Sie dann eine Instance des Players Video.js erstellt haben, sind die folgenden Aufrufe erforderlich, um sie zu registrieren und zu aktivieren: ``` registerIVSQualityPlugin(videojs); // where videojs is the video.js variable player.enableIVSQualityPlugin(); // where player is the instance of the videojs player ``` Dadurch wird eine Menüschaltfläche der Benutzeroberfläche erstellt, mit der Sie eine Qualität für den Stream auswählen können. ### Plug-Ins und TypeScript Wenn Sie TypeScript verwenden, enthält unser npm-Paket den `VideoJSQualityPlugin`-Typ, den Sie importieren und mit unserem Plugin verwenden möchten. Plugins sind im Wesentlichen Mixins, so dass diese Typ-Schnittstelle als [Überschneidung](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) mit dem `VideoJSIVSTech`-TypeScript-Schnittstelle zu verwenden ist. ## Inhaltssicherheitsrichtlinie Die Amazon IVS Video.js API ist so konfiguriert, dass sie auf Seiten funktioniert, die Content Security Policy (CSP) verwenden. Weitere Informationen finden Sie im Abschnitt „Arbeiten mit Inhaltssicherheitsrichtlinie“ im [IVS Player SDK: Leitfaden für Web](web-content-security-policy.md). ## Funktionen ### Wiedergabe Die Amazon IVS Video.js-API unterstützt die erforderlichen Schnittstellen für die interne Verwendung durch das Video.js-Framework. Die Client-Anwendung muss diese Methoden wahrscheinlich nicht direkt verwenden, da Video.js die notwendige Integration durchführt und eine Standard-Schnittstelle darstellt. Eine Möglichkeit, auf interne Video.js und Amazon IVS-Player-Methoden zuzugreifen, besteht jedoch darin, das Player-Objekt Video.js zu verwenden, um das erforderliche Objekt-Handle für die Technologie zu erhalten. Um auf die API zuzugreifen, rufen Sie die Instance Ihres „Video.js“ -Players wie gewohnt ab: ``` let player = videojs("videoTagId"); //replace videoTagId with your