Seit April 2017 unterstützt Chrome für Android O die Funktion „Bild im Bild“.
Nutzer können damit ein <video>-Element in einem kleinen Overlay-Fenster abspielen, das nicht von anderen Fenstern blockiert wird. So können sie das Element gleichzeitig ansehen, während es andere Dinge tut.
So funktioniert es: Öffnen Sie Chrome, rufen Sie eine Website mit einem Video auf und spielen Sie das Video im Vollbildmodus ab. Drücke die Startbildschirmtaste, um deinen Android-Startbildschirm aufzurufen. Das wiedergegebene Video wechselt automatisch in Bild im Bild. Das ist alles! Ziemlich cool, oder?
Es ist, aber wie sieht es mit dem Desktop aus? Was ist, wenn die Website dieses Erlebnis kontrollieren möchte?
Die gute Nachricht ist, dass eine Picture-in-Picture Web API-Spezifikation in Bearbeitung ist. Mit dieser Spezifikation soll es Websites ermöglichen, dieses Verhalten einzuleiten und zu steuern. Dazu werden der API die folgenden Properties zur Verfügung gestellt:
- Die Website wird benachrichtigt, wenn ein Video in den Bild-im-Bild-Modus wechselt und beendet wird.
- Erlaubt der Website, durch eine Nutzergeste die Bild-im-Bild-Funktion für ein Videoelement auszulösen.
- Erlaube der Website, die Funktion „Bild im Bild“ zu schließen.
- Erlaubt der Website zu prüfen, ob die Funktion „Bild im Bild“ ausgelöst werden kann.
Und so könnte das aussehen:
<video id="video" src="https://example.com/file.mp4"></video>
<button id="pipButton"></button>
<script>
// Hide button if Picture-in-Picture is not supported.
pipButton.hidden = !document.pictureInPictureEnabled;
pipButton.addEventListener('click', function() {
// If there is no element in Picture-in-Picture yet, let's request Picture
// In Picture for the video, otherwise leave it.
if (!document.pictureInPictureElement) {
video.requestPictureInPicture()
.catch(error => {
// Video failed to enter Picture-in-Picture mode.
});
} else {
document.exitPictureInPicture()
.catch(error => {
// Video failed to leave Picture-in-Picture mode.
});
}
});
</script>
Feedback
Was meinen Sie? Bitte senden Sie Ihr Feedback und melden Sie Probleme im Bild-in-Bild-WICG-Repository. Wir freuen uns auf Ihre Meinung!
Standard-BiB-Verhalten von Android verhindern
Derzeit kannst du verhindern, dass Videos das standardmäßige BiB-Verhalten von Android in Chrome verwenden, indem du auf ein Größenänderungsereignis reagiert und erkennen kannst, wenn sich die Fenstergröße erheblich geändert hat (siehe Code unten). Dies wird nicht als dauerhafte Lösung empfohlen, sondern bietet eine vorübergehende Option, bis die Web API implementiert ist.
// See whether resize is small enough to be PiP. It's a hack, but it'll
// work for now.
window.addEventListener('resize', function() {
if (!document.fullscreenElement) {
return;
}
var minimumScreenSize = 0.33;
var screenArea = screen.width * screen.height;
var windowArea = window.outerHeight * window.outerWidth;
// If the size of the window relative to the screen is less than a third,
// let's assume we're in PiP and exit fullscreen to prevent Auto PiP.
if ((windowArea / screenArea) < minimumScreenSize) {
document.exitFullscreen();
}
});