Obraz w obrazie (PIP)

François Beaufort
François Beaufort
GitHub

Od kwietnia 2017 r. Chrome na Androida O obsługuje tryb Picture-in-Picture. Umożliwia ona użytkownikom odtwarzanie elementu <video> w małym oknie nakładki, które nie jest blokowane przez inne okna, dzięki czemu mogą oglądać treści, wykonując jednocześnie inne czynności.

Oto jak to działa: otwórz Chrome, otwórz stronę internetową zawierającą film i odtwórz go na pełnym ekranie. Następnie naciśnij przycisk ekranu głównego, aby przejść do ekranu głównego Androida. Odtwarzany film automatycznie przejdzie w tryb obraz w obrazie. To wszystko. Całkiem nieźle, prawda?

Zdjęcie w obrazie na Androidzie
Rysunek 1. Zdjęcie z obrazu w obrazie na Androidzie

A co z komputerami? Co zrobić, jeśli witryna chce mieć kontrolę nad tym procesem?

Dobra wiadomość jest taka, że w tej chwili opracowywana jest specyfikacja interfejsu Picture-in-Picture Web API. Specyfikacja ma umożliwić witrynom inicjowanie i kontrolowanie tego zachowania przez udostępnienie interfejsowi API następującego zestawu właściwości:

  • Powiadomienie witryny o włączeniu i wyłączeniu trybu obrazu w obrazie.
  • Zezwalanie witrynie na uruchamianie trybu obrazu w obrazie w przypadku elementu wideo za pomocą gestów użytkownika.
  • Zezwalaj witrynie na wyjście z trybu obrazu w obrazie.
  • Zezwól stronie na sprawdzanie, czy może zostać aktywowany obraz w obrazie.

Może to wyglądać tak:

<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>

Prześlij opinię

Co o tym sądzisz? Przesyłaj opinie i zgłaszaj problemy w repozytorium WICG Picture-in-Picture. Chętnie poznamy Twoje opinie.

Zapobieganie domyślnemu działaniu obrazu w pełnym ekranie na Androidzie

Obecnie możesz uniemożliwić filmowi korzystanie z domyślnego zachowania PiP na Androidzie w Chrome, odpowiadając na zdarzenie zmiany rozmiaru i wykrywanie, kiedy rozmiar okna zmienił się znacząco (patrz kod poniżej). Nie jest to zalecane rozwiązanie, ale stanowi tymczasową opcję do czasu wdrożenia interfejsu Web API.

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