Beeld-in-beeld (PiP)

François Beaufort

Sinds april 2017 ondersteunt Chrome voor Android O Picture-in-Picture . Hiermee kunnen gebruikers een <video> -element afspelen in een klein overlay-venster dat niet wordt geblokkeerd door andere vensters, zodat ze kunnen kijken terwijl ze andere dingen doen.

Zo werkt het: open Chrome, ga naar een website die een video bevat en speel deze op volledig scherm af. Vanaf daar drukt u op de Home-knop om naar uw Android-startscherm te gaan en de afgespeelde video gaat automatisch over naar Picture-in-Picture. Dat is alles! Best cool toch?

Dat is zo, maar hoe zit het met de desktop? Wat als de website die ervaring wil controleren?

Het goede nieuws is dat er momenteel wordt gewerkt aan een Picture-in-Picture Web API- specificatie. Deze specificatie is bedoeld om websites in staat te stellen dit gedrag te initiëren en te controleren door de volgende reeks eigenschappen aan de API bloot te stellen:

• Breng de website op de hoogte wanneer een video de Picture-in-Picture-modus binnenkomt en verlaat.
• Laat de website Picture-in-Picture activeren op een video-element via een gebruikersgebaar.
• Laat de website Picture-in-Picture afsluiten.
• Laat de website controleren of Picture-in-Picture kan worden geactiveerd.

En zo zou het er uit kunnen zien:

<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

Dus wat denk je? Stuur uw feedback en meld problemen in de Picture-in-Picture WICG-repository . Wij zijn benieuwd naar uw mening!

Voorkomen van het standaard PIP-gedrag van Android

Tegenwoordig kunt u voorkomen dat video het standaard PiP-gedrag van Android in Chrome gebruikt door te reageren op een resize-gebeurtenis en te detecteren wanneer de venstergrootte aanzienlijk is gewijzigd (zie onderstaande code). Dit wordt niet aanbevolen als permanente oplossing, maar biedt een tijdelijke optie totdat de Web API is geïmplementeerd.

// 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();
    }
});