Erste Schritte - Amazon Interactive Video Service
DemoSetup mit Skript-TagBeispiel-CodeEinrichtung mit NPMTypeScriptService Worker einrichtenNur Audiowiedergabe

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.

Erste Schritte

Wir bieten Unterstützung durch einen script-Tag sowie über ein npm-Modul.

Demo

Die folgende Live-Demo zeigt, wie Sie den Web Player mit einer script-Markierung aus unserem Netzwerk für Bereitstellung von Inhalten verwenden: Amazon-IVS-Player-Beispiel.

Setup mit Skript-Tag

Um den Amazon IVS-Player mithilfe des script-Tags einrichten:

  1. Fügen Sie das folgende Tag hinzu (für die neueste Version des Players).

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

  2. Sobald amazon-ivs-player.min.js geladen ist, fügt es eine IVSPlayer-Variable zum globalen Kontext hinzu. Dies ist die Bibliothek, die Sie verwenden, um eine Player-Instance zu erstellen. Überprüfen Sie zuerst isPlayerSupported, um festzustellen, ob der Browser den IVS-Player unterstützt:

    if (IVSPlayer.isPlayerSupported) { ... }

    Um dann eine Player-Instance zu erstellen, rufen Sie die create-Funktionen auf dem IVSPlayer-Objekt auf.

    const player = IVSPlayer.create();

    Das Amazon IVS Player SDK for Web verwendet Web Worker, um die Videowiedergabe zu optimieren.

  3. Laden und Wiedergeben eines Streams mit den Funktionen load und play auf der Player-Instance:

    player.load("PLAYBACK_URL");
player.play();

    wobei PLAYBACK_URL die URL ist, die von der Amazon IVS-API zurückgegeben wird, wenn ein Stream-Schlüssel angefordert wird.

Beispiel-Code

Ersetzen Sie in diesem Beispiel PLAYBACK_URL mit der URL des Quellstreams, den Sie laden möchten. Im Beispiel wird die neueste Version des Amazon IVS Players verwendet.

<script src="https://player.live-video.net/1.24.0/amazon-ivs-player.min.js"></script>
<video id="video-player" playsinline></video>
<script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create();
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.load("PLAYBACK_URL");
    player.play();
  }
</script>

Im <video>-Tag wird playsinline für die Inline-Wiedergabe unter iOS Safari benötigt. Siehe https://webkit.org/blog/6784/new-video-policies-for- iOS/.

Einrichtung mit NPM

Anleitungen, einschließlich einer Beispiel-Webpack-Konfigurationsdatei, finden Sie im folgenden Repository: https://github.com/aws-samples/amazon-ivs-player-web-sample .

Hinweis: Wenn Sie statische Player-Komponenten von Ihrer eigenen Domain hosten, müssen Sie den „Content-Type“-Antwort-Header für die WebAssembly Binärdatei (amazon-ivs-wasmworker.min.wasm) auf „application/wasm“ setzen. Sie sollten Ihre Komponenten auch gzipen, um die über das Kabel heruntergeladenen Bytes zu reduzieren und die Zeit des Players zum Starten der Wiedergabe zu verbessern.

TypeScript

Wenn Sie verwenden TypeScript, enthält das npm-Paket Typen, die Sie möglicherweise importieren und verwenden möchten. Weitere Informationen zu diesen Typen finden Sie in Amazon IVS Player SDK: Referenz für Web.

Service Worker einrichten

Um die Latenz bei der Wiedergabe über Browser, die nur die native Wiedergabe unterstützen (hauptsächlich iOS Safari), weiter zu verringern, kann ein Service Worker eingerichtet und konfiguriert werden. Weitere Informationen finden Sie unter Reduzieren der Latenz bei Playern von Drittanbietern.

So richten Sie den Amazon IVS Player für die Verwendung eines Service Workers ein:

  1. Erstellen Sie eine Datei, um den IVS Service Worker vom CDN zu laden. Dies ist erforderlich, da Service Worker in derselben Domain gehostet werden müssen wie die Seite, von der sie abgerufen werden.

    Erstellen Sie eine Datei mit dem Namen amazon-ivs-service-worker-loader.js oder ähnlich und fügen Sie die folgende Zeile hinzu:

    importScripts('https://player.live-video.net/1.24.0/amazon-ivs-service-worker.min.js');

  2. Übergeben Sie beim Erstellen einer Player-Instance die folgende serviceWorker-Konfiguration mit Verweis auf die amazon-ivs-service-worker-loader.js-Datei:

    const player = IVSPlayerPackage.create({
   serviceWorker: {
      url: 'amazon-ivs-service-worker-loader.js'
   }
});

  3. Stellen Sie für das Videoelement das crossOrigin-Attribut auf anonymous ein. Dies ist erforderlich, damit der Service Worker Änderungen am Manifest vornehmen kann.

Hinweis: Um den Service Worker lokal zu testen, muss die Seite entweder über localhost oder https bereitgestellt werden.

Eine Live-Demo finden Sie im Service-Worker-Beispiel im folgenden Repository:

https://github.com/aws-samples/amazon-ivs-player-web-Beispiel

Nur Audiowiedergabe

Die reine Audioqualität muss manuell mit der setQuality() Methode ausgewählt werden. Beachten Sie, dass der Player keinen true Wert für das zweite Argument unterstütztadaptive, also ist dieses Argument standardmäßig false.

Um die Qualität auf „nur Audio“ zu setzen, bevor die Wiedergabe beginnt, rufen Sie setQuality() innerhalb des READY Ereignisses auf:

player.addEventListener(PlayerState.READY, () => {
   const qualities = player.getQualities();
   const audioOnly = qualities.find(q => q.name === 'audio_only');
   if (audioOnly) {
      player.setQuality(audioOnly);
   }
});

Das Festlegen der Qualität innerhalb von READY funktioniert sowohl für den Autoplay- als auch für den Nicht-Autoplay-Modus.