Die Picture-in-Picture-API

Die Picture-in-Picture-API (PiP) ist eine neue experimentelle Webplattform-API,´ mit der Webseiten ein Video in einem kleinen Fenster abspielen können, das über anderen Fenstern bleibt. Diese Funktion ist nützlich für Videoseiten, auf denen die Benutzer ihre Videos weiterhin ansehen sollen, während sie etwas anderes tun, z. B. ein Codierungs-Tutorial-Video ansehen und gleichzeitig in ihren Texteditoren codieren usw.

Picture-in-Picture befindet sich derzeit in Chrome 69 hinter Browser-Flags (z. B. 3 davon). Wir sollten jedoch in der Lage sein, mit ihnen herumzuspielen, indem wir die neueste Chrome-Version herunterladen und diese Flags aktivieren.
Dieser Artikel führt Sie durch die ersten Schritte mit Picture-in-Picture, damit Ihre Videos auch über anderen Fenstern angezeigt werden. Sie können auch das GitHub-Repository und die Live-Demo sofort überprüfen, wenn Sie möchten.

Aktivieren Sie Picture-in-Picture

Bevor wir uns mit dem Code befassen, stellen wir zunächst sicher, dass wir unsere Ergebnisse im Browser ordnungsgemäß anzeigen können, indem wir die erforderlichen Chrome-Browser-Flags aktivieren. Gehen Sie in chrome://flags Ihrem Chrome-Browser zu und aktivieren Sie Folgendes:

Experimentelle Funktionen der Webplattform
Aktivieren Sie Picture-in-Picture
Aktivieren Sie die Verwendung von SurfaceLayer-Objekten für Videos

Startpunkt

Für diesen Artikel verwenden wir das folgende HTML-Markup als Ausgangspunkt:

<video  src = "https://cdn.arnellebalane.com/videos/original-video.mp4"
 steuert > </ video> <button> Geben Sie Picture-in-Picture </ button> ein

Auf der Seite wird ein Videoelement angezeigt, das den Big Buck Bunny-Trailer abspielt, sowie eine Schaltfläche zum Umschalten von Picture-in-Picture. und mit etwas Styling wird es so aussehen:

In unserem JavaScript-Code werden wir auch Variablen definieren, die sowohl auf die Video- als auch auf die Schaltflächenelemente verweisen.

        const video = document.querySelector ('video');
        const button = document.querySelector ('button');

Überprüfen Sie die Unterstützung für Picture-in-Picture

Nicht alle Benutzer, die Ihre Seite besuchen, verwenden einen Browser, der Picture-in-Picture unterstützt. Daher aktivieren wir ihn nur, wenn er vom Browser unterstützt wird. Dies wird als progressive Verbesserung bezeichnet. Dies ist wichtig, damit Benutzer keine fehlerhaften Erfahrungen machen, wenn ihre Browser Picture-in-Picture nicht unterstützen. Das Überprüfen der Picture-in-Picture-Unterstützung kann durch Überprüfen der pictureInPictureEnabledEigenschaft des document Objekts erfolgen:

if (! document.pictureInPictureEnabled ) { 
  // Informieren Sie den Benutzer, dass PiP nicht aktiviert / unterstützt wird.   button.textContent = 'PiP wird in Ihrem Browser nicht unterstützt.'; 
  button.disabled = true; 
}}

In der Spezifikation heißt es: document.pictureInPictureEnabled " trueWenn es keine zuvor festgelegten Benutzerpräferenzen, Einschränkungen oder Plattformbeschränkungen gibt und falseanderweitig." Ich weiß nicht, was all diese Einstellungen, Einschränkungen und Einschränkungen sind, aber es ist, false wenn eines der erforderlichen Browser-Flags nicht aktiviert ist. Für ältere Browser ist dies nur undefined ein falscher Wert.

Bild-in-Bild anfordern

Sobald wir festgestellt haben, dass der Browser Picture-in-Picture unterstützt, können wir die API jetzt sicher verwenden. In unserem Beispiel wird das Video in den Bild-in-Bild-Modus versetzt, wenn auf die Schaltfläche „Bild-in-Bild eingeben“ geklickt wird. Wir können ein Video in den Picture-in-Picture-Modus versetzen, indem wir die requestPictureInPicture() Methode aufrufen , die ein Promise- Objekt zurückgibt, mit dem festgestellt werden kann, ob die Anforderung erfolgreich war oder nicht.

 button.addEventListener ('click', () => { 
  video.requestPictureInPicture ()
     .then (() => {/ ** /}) 
    .catch (() => {/ **.}); 
});

Wenn das Versprechen aufgelöst wird, wechselt das Video in den Bild-in-Bild-Modus und die document.pictureInPictureElement Eigenschaft wird auf das Element gesetzt, das sich derzeit im Bild-in-Bild-Modus befindet, dh auf unser video Element.

Bild-in-Bild verlassen

Benutzer können den Bild-in-Bild-Modus verlassen, indem sie im Bild-in-Bild-Fenster auf das Symbol „x“ klicken. Wir können unserer Seite jedoch auch eine Möglichkeit hinzufügen, wie der Benutzer Picture-in-Picture verlassen kann. In unserem Beispiel sollte das Klicken auf die Schaltfläche "Bild-in-Bild eingeben", während sich ein Bild-in-Bild-Fenster befindet, das Fenster schließen. Wir ändern den Klickereignishandler unserer Schaltfläche, um zu überprüfen, ob im Bild-in-Bild-Modus bereits ein Videoelement angezeigt wird. Wenn ja, schließen wir es, indem wir die document.exitPictureInPicture() Methode aufrufen

          button.addEventListener ('click', () => { 
          if ( document.pictureInPictureElement ) { 
                 document.exitPictureInPicture ().then (() => {/ ** /}).catch (() => {/ ** /});                    
          } else {             
          // Bild-in-Bild anfordern
          } });

Wenn Sie Picture-in-Picture verlassen, wird die document.pictureInPictureElement Eigenschaft auf zurückgesetztnull

Bild-in-Bild-Ereignisse

Wenn Elemente in Picture-in-Picture ein- und ausgehen, lösen sie Ereignisse aus, um diese Änderungen zu melden. Picture-in-Picture definiert zwei neue Ereignisse für Videoelemente: enterpictureinpicture und leavepictureinpicture , die ausgelöst werden, wenn das Element Picture-in-Picture betritt bzw. verlässt.

Verwenden wir diese Ereignisse in unserem Beispiel, um die Beschriftung unserer Schaltfläche zu aktualisieren, je nachdem, ob sich das Video in Bild-in-Bild befindet oder nicht.

    video.addEventListener ('enterpictureinpicture', () => { 
          button.textContent = 'Bild-in-Bild beenden';
    }); 
    video.addEventListener ('leftpictureinpicture', () => {
         button.textContent = 'Bild in Bild eingeben';
    });

Fazit

Und das war's mit der Picture-in-Picture-API! Hier sind einige abschließende Anmerkungen und Gedanken dazu:

Es funktioniert derzeit nur mit Videoelementen, soll aber erweiterbar sein. Dies bedeutet, dass wir möglicherweise in Zukunft andere Elemente im Bild-in-Bild-Fenster platzieren können.
Die Anzahl der zulässigen Picture-in-Picture-Fenster bleibt der Implementierung des Browsers und der Plattform überlassen.
Das Bild-in-Bild-Fenster bleibt in der unteren rechten Ecke des Bildschirms. Es wäre schön, die Möglichkeit zu haben, es zu ziehen und seine Größe zu ändern.