Seit April 2017 unterstützt Chrome für Android O die Funktion „Bild-im-Bild“.
Nutzer können ein <video>-Element in einem kleinen Overlay-Fenster abspielen, das nicht von anderen Fenstern blockiert wird. So können sie sich Inhalte ansehen, während sie andere Dinge tun.
So funktionierts: Öffnen Sie Chrome, rufen Sie eine Website mit einem Video auf und spielen Sie es im Vollbildmodus ab. Drücke dann auf die Startbildschirmtaste, um zum Android-Startbildschirm zu gelangen. Das abgespielte Video wird automatisch in den Bild-im-Bild-Modus versetzt. Das war's auch schon. Ziemlich cool, oder?
Das ist richtig, aber wie sieht es auf dem Computer aus? Was ist, wenn die Website diese Funktion steuern möchte?
Die gute Nachricht ist, dass derzeit eine Spezifikation für die Picture-in-Picture Web API erstellt wird. Mit dieser Spezifikation soll es Websites ermöglicht werden, dieses Verhalten zu initiieren und zu steuern, indem die folgenden Eigenschaften der API zur Verfügung gestellt werden:
- Die Website wird benachrichtigt, wenn ein Video den Bild-im-Bild-Modus betritt und verlässt.
- Die Website darf Picture-in-Picture für ein Videoelement über eine Nutzergeste auslösen.
- Erlauben Sie der Website, den Bild-im-Bild-Modus zu beenden.
- Erlauben Sie der Website, zu prüfen, ob die Funktion „Bild im Bild“ ausgelöst werden kann.
Das könnte so 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 halten Sie davon? Bitte senden Sie Ihr Feedback und melden Sie Probleme im WICG-Repository für Picture-in-Picture. Wir freuen uns auf deine Meinung.
Standard-PIP-Verhalten von Android verhindern
Derzeit kannst du verhindern, dass für Videos in Chrome das standardmäßige PiP-Verhalten von Android verwendet wird. Dazu musst du auf ein Größenänderungsereignis reagieren und erkennen, wenn sich die Fenstergröße erheblich geändert hat (siehe Code unten). Diese Lösung wird nicht als dauerhafte Lösung empfohlen, sondern ist 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();
}
});