In Version 69 wurde die PictureInPicture-Erweiterung angezeigt, mit der Sie Videos über allen Fenstern anzeigen können. Ich habe beschlossen, diese Funktion zu testen und die Ergebnisse zu teilen.
Ich habe sofort ein Beispiel gefunden, aber die Bild-in-Bild-Schaltfläche zum Umschalten in den Bild-in-Bild-Modus (im Folgenden: PiP) war nicht verfügbar. Ich habe das
Chrom- Flag überprüft
: // flags / # Bild-in-Bild aktivieren , der Wert ist "Standard". Dieses Flag ist gleichbedeutend mit "Aktiviert", hat jedoch versucht, es manuell zu aktivieren.
Es hat nicht geholfen, es stellte sich heraus, dass wir ein weiteres
Chrome- Flag benötigten
: // flags / # enable-surface-for-videos . Der Wert "Default" entspricht "Disabled".
Eingeschaltet und verdient. Sie schreiben auch, dass es notwendig ist, das Flag # enable-experimental-web-platform-features zu aktivieren, aber es hat ohne mich funktioniert.
Beispiel
Lassen Sie uns ein einfaches Beispiel machen, das <video /> -Tag, eine Schaltfläche zum Ein- und Ausschalten des PiP-Modus, mit der verfügbare PiP-Ereignisse verarbeitet werden.
<html> <head> <title>Chrome 69</title> </head> <body> <video width="320" height="240" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <br/> <button> PiP</button> <script> const video = document.querySelector('video'); const button = document.querySelector('button'); if (!document.pictureInPictureEnabled) { button.textContent = ' PiP .'; button.disabled = true; } button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } else { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); } }); video.addEventListener('enterpictureinpicture', () => { button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { button.textContent = ' PiP'; }); </script> </body> </html>
Überprüfen Sie die Verfügbarkeit des Modus:
if (document.pictureInPictureEnabled){
Es ist einfach, wenn die Eigenschaft existiert, gibt sie true oder false zurück.
Wir fordern Sie auf, den Modus zu starten:
button.addEventListener('click', () => { video.requestPictureInPicture() .then(() => { }) .catch(() => { }); });
Wenn die Berechtigung erhalten wurde, führen Sie andernfalls catch aus. Die Anfrage wird definitiv abgelehnt, wenn sie nicht durch ein Benutzerereignis ausgelöst wird.
Nach dem Start von document.pictureInPictureElement wird unser <video /> -Element zurückgegeben.
Um den Modus zu verlassen, können Sie im PiP-Fenster auf das Kreuz in der oberen rechten Ecke klicken.
Sie können eine Ausgabe programmgesteuert vornehmen:
button.addEventListener('click', () => { if (document.pictureInPictureElement) { document.exitPictureInPicture() .then(() => { }) .catch(() => { }); } });
Nach dem Beenden von document.pictureInPictureElement wird wieder null zurückgegeben.
PiP-Ereignisse
Es stehen zwei Ereignisse zur Verfügung: PiP-Modus ein bzw. aus:
video.addEventListener('enterpictureinpicture', () => { // button.textContent = ' PiP'; }); video.addEventListener('leavepictureinpicture', () => { // button.textContent = ' PiP'; });
Zusammenfassung
Im Moment funktioniert dieser Modus nur mit dem <video /> -Tag, kann aber erweitert werden.
Das PiP-Fenster erscheint in der unteren rechten Ecke, bisher können wir es nicht beeinflussen.
Der PiP-Modus ist nicht mit dem Vollbildmodus oder dem einen oder anderen kompatibel, was ziemlich logisch ist.
Es kann immer nur ein PiP-Fenster vorhanden sein.
Die Registerkarte, auf der der Benutzer den PiP-Modus aktiviert hat, wird durch das Symbol angezeigt (sichtbar auf dem KDPV).
UPD : Die neue API ist die W3C-Abteilung namens WICG (Web Platform Incubator Community Group).
Mithilfe dieser API können Websites steuern, wann das PiP-Fenster geöffnet und geschlossen werden soll, eine eigene Schaltfläche für die Verwaltung erstellen und Statistiken erfassen, wenn der Benutzer PiP verwendet.
Einige Browser unterstützen diese Funktion bereits, basieren jedoch nicht auf W3C
(Zum Beispiel Opera und Yandex.Browser).
Firefox und Edge haben die Implementierung der neuen API noch nicht angekündigt.