Erste Schritte mit dem IVS Web Player SDK - Amazon IVS
DemosSetup mit Skript-TagBeispiel-CodeEinrichtung mit NPMTypeScriptService Worker einrichtenReine Audiowiedergabe

Erste Schritte mit dem IVS Web Player SDK

Dieses Dokument führt Sie durch die Schritte zum Einstieg in das Amazon IVS Web Player SDK.

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

Demos

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. In der Demo werden u. a. Event-Listener eingerichtet.

Unter https://github.com/aws-samples/amazon-ivs-player-web-sample finden Sie auch eine Auswahl zusätzlicher Webplayer-Demos.

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.35.0/amazon-ivs-player.min.js"></script>

  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 Web Player SDK 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.35.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

Eine Anleitung, 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 „Inhaltstyp“-Antwortheader 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 TypeScript verwenden, 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.35.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-sample

Reine Audiowiedergabe

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

Um die Qualität vor Beginn der Wiedergabe auf „Reine Audiowiedergabe“ festzulegen, rufen Sie setQuality() innerhalb des Ereignisses READY auf:

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

Die Einstellung der Qualität innerhalb von READY funktioniert sowohl im Modus für die automatische Wiedergabe als auch im Modus ohne automatische Wiedergabe.