# Erste Schritte mit dem IVS Web Player SDK
<a name="web-getting-started"></a>

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
<a name="web-demo"></a>

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](https://codepen.io/amazon-ivs/pen/QWbzORP/c3b13a2df34b60ada7756f3a2af8d2f0). In der Demo werden u. a. Event-Listener eingerichtet.

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

## Setup mit Skript-Tag
<a name="web-setup-script-tag"></a>

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

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

1. 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
<a name="web-sample-code"></a>

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.50.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/](https://webkit.org/blog/6784/new-video-policies-for-ios/).

## Einrichtung mit NPM
<a name="web-setup-npm"></a>

Eine Anleitung, einschließlich einer Beispiel-Webpack-Konfigurationsdatei, finden Sie im folgenden Repository: [https://github.com/aws-samples/amazon-ivs-player-web-sample](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
<a name="web-typescript"></a>

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](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/).

## Service Worker einrichten
<a name="web-service-worker"></a>

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](player.md#player-reducing-latency).

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.50.0/amazon-ivs-service-worker.min.js');
   ```

1. Ü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'
      }
   });
   ```

1. 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](https://github.com/aws-samples/amazon-ivs-player-web-sample)

## Reine Audiowiedergabe
<a name="web-audio-only-playback"></a>

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.

## Optimieren der Wiedergabe im Hintergrund
<a name="web-optimize-background-playback"></a>

Ab SDK-Version 1.45.0 kann der Client so konfiguriert werden, dass er die Datennutzung bei der Wiedergabe auf einer Hintergrund-Registerkarte optimiert. Wenn dieses Feature aktiviert ist, wählt der Player nach Ablauf der angegebenen Dauer die höchste verfügbare SD-Videoqualität mit maximal 480 p aus. Der Player wählt immer Video aus; audio\$1only ist nicht ausgewählt. Dies gilt sowohl für den manuellen als auch für den automatischen Modus. Wenn die Registerkarte im Vordergrund steht, wechselt der Player automatisch zu seiner vorherigen Einstellung zurück.

So aktivieren Sie diese Funktion:

```
const player = IVSPlayer.create({
   optimizeBackgroundPlayback: {
      enabled: true,
      switchDelayMs: 60 * 1000,   // Optional, defaults to 60s
   }
});
```