Seit April 2017 wird Bild im Bild in Chrome für Android O unterstützt.
Damit können Nutzer ein <video>-Element in einem kleinen Overlay-Fenster abspielen, das nicht von anderen Fenstern blockiert wird, damit sie es ansehen können, während sie andere Dinge tun.
So funktioniert es: Öffnen Sie Chrome, rufen Sie eine Website mit einem Video auf und spielen Sie es im Vollbildmodus ab. Über die Home-Taste gelangst du zum Android-Startbildschirm. Das wiedergegebene Video wechselt automatisch in den Bild-im-Bild-Modus. Das ist alles! Ziemlich cool, oder?
Das ist es, aber wie sieht es mit dem Desktop aus? Was ist, wenn die Website diese Erfahrung steuern möchte?
Die gute Nachricht ist, dass gerade eine Spezifikation für die Picture-in-Picture-Web-API entwickelt wird. Diese Spezifikation zielt darauf ab, Websites zu ermöglichen, dieses Verhalten zu initiieren und zu steuern, indem die folgenden Eigenschaften für die API bereitgestellt werden:
- Die Website benachrichtigen, wenn ein Video den Bild-im-Bild-Modus aktiviert oder verlässt
- Erlaube der Website, die Funktion „Bild im Bild“ über eine Nutzergeste für ein Videoelement auszulösen.
- Erlaube der Website, den Bild-im-Bild-Modus zu beenden.
- Die Website darf pr��fen, ob „Bild im Bild“ ausgelöst werden kann.
Und so könnte es 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 meinst du? Bitte senden Sie uns Ihr Feedback und melden Sie dort Probleme im Picture-in-Picture-WICG-Repository. Wir sind gespannt auf Ihre Meinung!
Das standardmäßige BiB-Verhalten von Android verhindern
Derzeit können Sie verhindern, dass Videos das BiB-Standardverhalten von Android in Chrome verwenden, indem Sie auf ein Größenänderungsereignis reagieren und erkennen, wenn sich die Fenstergröße erheblich geändert hat (siehe Code unten). Dies wird nicht als dauerhafte Lösung empfohlen, bietet aber eine temporäre 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();
}
});