Eine Einführung in die Picture-in-Picture Web API

Picture-in-Picture erschien erstmals im Web im Safari-Browser mit der Veröffentlichung von macOS Sierra im Jahr 2016. Es ermöglichte einem Benutzer, ein Video in einem kleinen schwebenden Fenster auszulagern, das über allen anderen Fenstern bleibt, sodass er weiterschauen konnte, während er andere Dinge tat. Es ist eine Idee, die vom Fernsehen stammt, wo man zum Beispiel sein beliebtes Sportereignis weiterverfolgen möchte, während man im Guide oder sogar in anderen Kanälen surft.

Nicht lange danach wurde Android 8.0 veröffentlicht, das Picture-in-Picture-Unterstützung über native APIs enthielt. Chrome für Android konnte Videos über diese API im Picture-in-Picture-Modus abspielen, obwohl sein Desktop-Gegenstück dazu nicht in der Lage war.

Dies führte zur Ausarbeitung eines Standards für die Picture-in-Picture Web API, die es Websites ermöglicht, dieses Verhalten zu initiieren und zu steuern.

Zum Zeitpunkt der Erstellung unterstützen nur Chrome (Version 70+) und Edge (Version 76+) diese Funktion. Firefox, Safari und Opera verwenden für ihre Implementierungen proprietäre APIs.

Verwendung der Picture-in-Picture API

Beginnen wir damit, ein Video auf einer Webseite hinzuzufügen.

<video controls src="video.mp4"></video>

In Chrome gibt es bereits einen Schalter zum Ein- und Aussteigen aus dem Picture-in-Picture-Modus.

Um die Implementierung von Firefox zu testen, müssen Sie zuerst die Flagge media.videocontrols.picture-in-picture.enabled in about:config aktivieren, dann mit der rechten Maustaste auf das Video klicken, um die Picture-in-Picture-Option zu finden.

Das funktioniert zwar, aber in vielen Fällen möchten Sie, dass Ihre Videosteuerung browserübergreifend konsistent ist, und Sie möchten vielleicht kontrollieren, welche Videos im Picture-in-Picture-Modus angezeigt werden können und welche nicht.

Wir können die Standardmethode zum Aufrufen des Picture-in-Picture-Modus im Browser mit unserer eigenen Methode unter Verwendung der Picture-in-Picture Web API ersetzen. Fügen wir zum Beispiel eine Schaltfläche hinzu, die beim Klicken diese Funktion aktiviert.

<button id="pipButton" class="hidden" disabled>Enter Picture-in-Picture mode</button>

Wählen Sie dann sowohl das Video als auch die Schaltfläche in JavaScript aus.

const video = document.getElementById('video');
const pipButton = document.getElementById('pipButton');

Die Schaltfläche ist standardmäßig ausgeblendet und deaktiviert, da wir wissen müssen, ob die Picture-in-Picture-API im Browser des Benutzers unterstützt und aktiviert ist, bevor wir sie anzeigen. Dies ist eine Form der progressiven Verbesserung, die dazu beiträgt, ein fehlerhaftes Erlebnis in Browsern zu vermeiden, die die Funktion nicht unterstützen.

Wir können überprüfen, ob die API unterstützt wird, und die Schaltfläche wie unten gezeigt aktivieren.

if ('pictureInPictureEnabled' in document) {
  pipButton.classList.remove('hidden')
  pipButton.disabled = false;
}

Aufruf des Picture-in-Picture-Modus

Nehmen wir an, unser JavaScript hat ermittelt, dass der Browser die Picture-in-Picture-Unterstützung aktiviert hat. Rufen wir requestPictureInPicture() für das Video-Element auf, wenn die Schaltfläche mit #pipButton geklickt wird. Diese Methode gibt ein Promise zurück, das das Video bei erfolgreicher Auflösung standardmäßig in einem Mini-Fenster unten rechts auf dem Bildschirm platziert, obwohl es vom Benutzer verschoben werden kann.

if ('pictureInPictureEnabled' in document) {
  pipButton.classList.remove('hidden')
  pipButton.disabled = false;

  pipButton.addEventListener('click', () => {
    video.requestPictureInPicture();
  });
}

Wir können den obigen Code nicht so belassen, da requestPictureInPicture() ein Promise zurückgibt und es möglich ist, dass das Promise abgelehnt wird, wenn beispielsweise die Video-Metadaten noch nicht geladen sind oder das disablePictureInPicture-Attribut auf dem Video vorhanden ist.

Fügen wir einen catch-Block hinzu, um diesen potenziellen Fehler abzufangen und den Benutzer darüber zu informieren, was vor sich geht.

pipButton.addEventListener('click', () => {
  video
    .requestPictureInPicture()
    .catch(error => {
      // Error handling
    });
});

Verlassen des Picture-in-Picture-Modus

Der Browser stellt hilfreich eine Schließen-Schaltfläche im Picture-in-Picture-Fenster bereit, mit der das Fenster beim Klicken geschlossen werden kann. Wir können jedoch auch eine weitere Möglichkeit bieten, den Picture-in-Picture-Modus zu verlassen. Wir können beispielsweise durch Klicken auf unsere #pipButton jedes aktive Picture-in-Picture-Fenster schließen.

pipButton.addEventListener('click', () => {
  if (document.pictureInPictureElement) {
    document
      .exitPictureInPicture()
      .catch(error => {
      // Error handling
    })
  } else {
    // Request Picture-in-Picture
  }
});

Eine weitere Situation, in der Sie das Picture-in-Picture-Fenster schließen möchten, ist, wenn das Video in den Vollbildmodus wechselt. Chrome erledigt dies bereits automatisch, ohne dass Code geschrieben werden muss.

Picture-in-Picture-Ereignisse

Der Browser ermöglicht es uns, zu erkennen, wann ein Video in den Picture-in-Picture-Modus wechselt oder diesen verlässt. Da es viele Möglichkeiten gibt, wie der Picture-in-Picture-Modus aufgerufen oder verlassen werden kann, ist es besser, auf Ereigniserkennung zu setzen, um Mediensteuerungen zu aktualisieren.

Die Ereignisse sind enterpictureinpicture und leavepictureinpicture, die, wie ihre Namen schon sagen, ausgelöst werden, wenn ein Video in den Picture-in-Picture-Modus wechselt bzw. diesen verlässt.

In unserem Beispiel müssen wir die Beschriftung der #pipButton aktualisieren, je nachdem, ob das Video gerade im Picture-in-Picture-Modus ist oder nicht.

Hier ist der Code, der uns dabei hilft.

video.addEventListener('enterpictureinpicture', () => {
  pipButton.textContent = 'Exit Picture-in-Picture mode';
});

video.addEventListener('leavepictureinpicture', () => {
  pipButton.textContent = 'Enter Picture-in-Picture mode';
});

Hier ist eine Demo davon

Anpassen des Picture-in-Picture-Fensters

Der Browser zeigt standardmäßig eine Wiedergabe/Pause-Schaltfläche im Picture-in-Picture-Fenster an, es sei denn, das Video spielt einen MediaStream-Objekt (erzeugt aus einer virtuellen Videoquelle wie einer Kamera, einem Videoaufnahmegerät, einer Bildschirmfreigabe oder anderen Hardwarequellen).

Es ist auch möglich, Steuerelemente hinzuzufügen, um direkt aus dem Picture-in-Picture-Fenster zum vorherigen oder nächsten Titel zu springen.

navigator.mediaSession.setActionHandler('previoustrack', () => {
  // Go to previous track
});

navigator.mediaSession.setActionHandler('nexttrack', () => {
  // Go to next track
});

Anzeigen eines Webcam-Feeds in einem Picture-in-Picture-Fenster

Webanwendungen für Videokonferenzen könnten davon profitieren, einen Webcam-Feed im Picture-in-Picture-Modus anzuzeigen, wenn ein Benutzer zwischen der App und anderen Browser-Tabs oder Fenstern wechselt.

Hier ist ein Beispiel:

Deaktivieren von Picture-in-Picture für ein Video

Wenn Sie nicht möchten, dass ein Video in einem Picture-in-Picture-Fenster angezeigt wird, können Sie das Attribut disablePictureInPicture hinzufügen, so:

<video disablePictureInPicture controls src="video.mp4"></video>

Zusammenfassung

Das ist so ziemlich alles, was Sie im Moment über die Picture-in-Picture Web API wissen müssen! Derzeit unterstützt die API nur das <video>-Element, es ist jedoch beabsichtigt, sie auf andere Elemente erweiterbar zu machen.

Obwohl die Browserunterstützung derzeit lückenhaft ist, können Sie sie dennoch als Möglichkeit nutzen, das Videoerlebnis auf Ihrer Website progressiv zu verbessern.

Weitere Lektüre

• Picture-in-Picture API-Spezifikation
• Video mit Picture-in-Picture ansehen
• Picture-in-Picture Beispiel (Google Chrome auf GitHub)