Amazon IVS Player SDK: Video.js-Integration - Amazon Interactive Video Service
Erste SchritteEreignisseFehlerPlug-insInhaltssicherheitsrichtlinieFunktionencurrentTimedisposedurationgetIVSEventsgetIVSPlayerloadspielenplaybackRateseekable

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Amazon 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.24.0 (Versionshinweise )

Erste Schritte

Die Amazon IVS-Support für Video.js wird durch eine Video.js-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 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.

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).

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

  2. Registrieren Sie die Technik mit der registerIVSTech-Funktion:

    registerIVSTech(videojs);

    wobei videojs das von Video.js bereitgestellte Objekt ist.

  3. 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 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.

<!doctype html>
<html lang="en">
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js"></script>
    <script src="https://player.live-video.net/1.24.0/amazon-ivs-videojs-tech.min.js"></script>
</head>

<body>
    <div class="video-container">
        <video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
    </div>
    <style>
        body {
            margin: 0;
        }

        .video-container {
            width: 640px;
            height: 480px;
            margin: 15px;
        }
    </style>
    <script>
        (function play() {
            // Get playback URL from Amazon IVS API
            var PLAYBACK_URL = '';
            
            // Register Amazon IVS as playback technology for Video.js
            registerIVSTech(videojs);

            // Initialize player
            var player = videojs('amazon-ivs-videojs', {
               techOrder: ["AmazonIVS"]
            }, () => {
               console.log('Player is ready to use!');
               // Play stream
               player.src(PLAYBACK_URL);
            });
        })();
    </script>
</body>
</html>

Einrichtung mit NPM

So verwenden Sie Amazon IVS Player über npm:

  1. Installieren Sie das video.js npm-Paket oder stellen Sie sicher, dass Ihr Projekt einen anderen Zugriff auf die Bibliothek Video.js hat.

  2. So installieren Sie das amazon-ivs-player-CLI-Paket:

    npm install amazon-ivs-player

  3. Wenn Sie bereit sind, die Amazon IVS-Technologie zu registrieren, importieren Sie die registerIVSTech-Funktion:

    import { registerIVSTech } from 'amazon-ivs-player';

  4. 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.

  5. 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 verwenden TypeScript, enthält unser npm-Paket die folgenden Typen, die Sie möglicherweise importieren und verwenden möchten.

  • VideoJSEvents, welche die zurückgegebene Struktur von getIVSEvents() beschreibt.

  • VideoJSIVSTech, der die Schnittstelle zu einer Player-Instance beschreibt, welche die AmazonIVS-Technologie verwendet. Dieser kann mit dem vom npm-Paket @types/video.js bereitgestellten VideoJsPlayer-Typ gekreuzt werden.

  • TechOptions, welche die Schnittstelle beschreibt, die die Konfigurationsoptionen definiert, die Sie an registerIVSTech() senden können.

Weitere Informationen zu diesen Typen finden Sie in Amazon IVS Player SDK: Webreferenz.

Ereignisse

Um Standard-Ereignisse von Video.js zu hören, verwenden Sie die an-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.

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.

code

 Der Fehlercode.

source

 Quelle des Fehlers.

message

 Menschlich lesbare Fehlermeldung.

Plug-ins

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 folgendenscript-Tag (für die neueste Version des IVS Players) verwenden: 

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

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.

Plugins und TypeScript

Wenn Sie verwenden TypeScript, enthält unser npm-Paket den VideoJSQualityPlugin Typ, den Sie möglicherweise importieren und mit unserem Plugin verwenden möchten. Plugins sind im Wesentlichen Mixins, so dass diese Typ-Schnittstelle als Überschneidung 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 Amazon IVS Player SDK: Leitfaden für Web.

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 <video> tag’s id

Dann können Sie Funktionen für diese Instance aufrufen.

Im Folgenden finden Sie die Teilmenge der Funktionen „Video.js“, die der Technologie-Layer von Amazon IVS überschreibt. Eine vollständige Liste der Funktionen von Video.js finden Sie in der video.js API-Dokumentation.

Funktion Beschreibung und Amazon IVS-spezifische Informationen

currentTime

Ruft die Zeit ab (in Sekunden vom Anfang) oder legt sie fest.

Amazon IVS: Wir empfehlen nicht, die aktuelle Zeit für Livestreams festzulegen.

dispose

Löscht die Player-Instance.

Amazon IVS: Dadurch wird auch das technische Backend von Amazon IVS gelöscht.

duration

Gibt die Dauer des Videos in Sekunden zurück.

Amazon IVS: Für Livestreams ergibt dies Infinity.

load

Beginnt das Laden der src()-Daten.

Amazon IVS: Dies ist ein No-Op.

spielen

Gibt den Stream wieder, der über den src-Aufruf eingerichtet wurde.

Amazon IVS: Wenn ein Livestream angehalten wurde, wird der Livestream aus den neuesten Frames wiedergegeben, anstatt von dort aus fortzufahren, wo er angehalten wurde.

playbackRate

Ruft die Video-Wiedergabegeschwindigkeit ab oder legt sie fest. 1,0 bedeutet normale Geschwindigkeit, 0,5, halbe Normalgeschwindigkeit, 2,0, zweifache Normalgeschwindigkeit usw.

Amazon IVS: In einem Livestream gibt ein „get 1“ zurück und ein Satz wird ignoriert.

seekable

Gibt TimeRanges der Medien zurück, die gesucht werden können.

Amazon IVS: Bei Livestreams gibt der Aufruf von end(0) auf den Rückgabewert (TimeRange) „Infinity“ zurück.

Amazon IVS-spezifisch

Die Technologie von Amazon IVS Video.js verfügt über zusätzliche Funktionen für den Zugriff auf Verhaltensweisen, die für Amazon IVS-Funktionen spezifisch sind:

Funktion Beschreibung

getIVSPlayer

Gibt die zugrunde liegende Amazon IVS-Player-Instance zurück. Die vollständige Amazon IVS Player Web API ist über diese Instance verfügbar. Wir empfehlen, die Basic Video.js Wiedergabe-API so weit wie möglich zu verwenden und diese Funktion nur für den Zugriff auf Amazon IVS-spezifische Funktionen zu verwenden. Die häufigsten Funktionen, auf die Sie wahrscheinlich auf der Amazon IVS-Player-Instance zugreifen müssen, sind setQuality() und addEventListener() / removeEventListener().

getIVSEvents

Gibt ein Objekt zurück, das Amazon IVS-spezifische Enums enthält. Dies wird zum Abhören von Amazon IVS-spezifischen Fehlern verwendet. Weitere Informationen finden Sie unter Ereignisse und Fehler.

currentTime

Ruft die Zeit ab (in Sekunden vom Anfang) oder legt sie fest.

Amazon IVS: Wir empfehlen nicht, die aktuelle Zeit für Livestreams festzulegen.

Signatures (Signaturen)

currentTime
currentTime(time)

Parameter

Parameter Typ Beschreibung

time

Zahl

Wenn time abwesend ist, wird die aktuelle Zeit abgerufen. Wenn time vorhanden ist, wird die Videowiedergabe auf diese Zeit festgesetzt.

Rückgabewert

Typ Beschreibung

Zahl

Die aktuelle Zeit in Sekunden vom Anfang an.

dispose

Löscht die Player-Instance.

Amazon IVS: Dadurch wird auch das technische Backend von Amazon IVS gelöscht.

Signatur

dispose()

Parameter

None

Rückgabewert

None

duration

Gibt die Dauer des Videos in Sekunden zurück.

Amazon IVS: Für Livestreams ergibt dies Infinity.

Signatur

duration()

Parameter

None

Rückgabewert

Typ Beschreibung

Zahl

Die Dauer des Timers in Sekunden. Für Livestreams ist dieser Wert Infinity.

getIVSEvents

Gibt ein Objekt zurück, das Amazon IVS-spezifische Enums enthält. Dies wird zum Abhören von Amazon IVS-spezifischen Fehlern und Ereignissen verwendet. Weitere Informationen finden Sie unter:

Signatur

getIVSEvents()

Parameter

None

Rückgabewert

Typ Beschreibung

object

Ein Objekt mit PlayerEventType, PlayerState und ErrorType, die den zugehörigen Enums zugeordnet sind.

getIVSPlayer

Gibt die zugrunde liegende Amazon IVS-Player-Instance zurück. Die vollständige Amazon IVS Player Web API ist über diese Instance verfügbar. Wir empfehlen, die Basic Video.js Wiedergabe-API so weit wie möglich zu verwenden und diese Funktion nur für den Zugriff auf Amazon IVS-spezifische Funktionen zu verwenden. Die häufigsten Funktionen, auf die Sie wahrscheinlich auf der Amazon IVS-Player-Instance zugreifen müssen, sind setQuality() und addEventListener() / removeEventListener().

Signatur

getIVSPlayer()

Parameter

None

Rückgabewert

Typ Beschreibung

MediaPlayer

Die erstellte Instance des Players.

load

Beginnt das Laden der src()-Daten.

Amazon IVS: Dies ist ein No-Op.

Signatur

load()

Parameter

None

Rückgabewert

None

spielen

Gibt den Stream wieder, der über den src-Aufruf eingerichtet wurde.

Amazon IVS: Wenn ein Livestream angehalten wurde, wird der Livestream aus den neuesten Frames wiedergegeben, anstatt von dort aus fortzufahren, wo er angehalten wurde.

Signatur

play()

Parameter

None

Rückgabewert

None

playbackRate

Ruft die Video-Wiedergabegeschwindigkeit ab oder legt sie fest. 1,0 bedeutet normale Geschwindigkeit, 0,5, halbe Normalgeschwindigkeit, 2,0, zweifache Normalgeschwindigkeit usw.

Amazon IVS: In einem Livestream gibt ein „get 1“ zurück und ein Satz wird ignoriert.

Signatures (Signaturen)

playbackRate
playbackRate(rate)

Parameter

Parameter Typ Beschreibung

rate

Zahl

Die Wiedergabegeschwindigkeit. Gültige Werte: im Bereich [0,25, 2,0].

Rückgabewert

Typ Beschreibung

Zahl

Die Wiedergabegeschwindigkeit.

seekable

Gibt TimeRanges der Medien zurück, die gesucht werden können.

Amazon IVS: Bei Livestreams gibt der Aufruf von end(0) auf den Rückgabewert (TimeRange) „Infinity“ zurück.

Signatur

seekable()

Parameter

None

Rückgabewert

Typ Beschreibung

TimeRange

TimeRange der Medien, die für die Suche verfügbar sind.