Obraz w obrazie (PIP)

François Beaufort

Od kwietnia 2017 roku Chrome na Androida O obsługuje funkcję obraz w obrazie. Umożliwia użytkownikom odtwarzanie elementu <video> w małym oknie nakładki, które nie zablokowane przez inne okna, dzięki czemu mogą oglądać, jednocześnie wykonując inne czynności.

Działa to tak: otwórz Chrome, wejdź na stronę zawierającą film, włącz go na pełnym ekranie. Następnie naciśnij przycisk ekranu głównego, aby przejść do Androida. Ekran główny i odtwarzany film zostaną automatycznie przeniesione do Obraz w obrazie. To wszystko. Całkiem nieźle, prawda?

.

Tak, ale co w przypadku komputerów? Co zrobić, jeśli witryna chce ją kontrolować? z doświadczeniem?

Mamy dobrą wiadomość: w fazie opracowywania specyfikacji interfejsu Picture-in-Picture Web API podczas rozmowy. Ta specyfikacja ma umożliwić witrynom inicjowanie i kontrolowanie tego przez udostępnienie interfejsu API tego zestawu właściwości:

• Powiadamianie witryny o rozpoczęciu odtwarzania filmu i opuszczaniu go.
• Zezwalaj witrynie na uruchamianie obrazu w obrazie w elemencie wideo za pomocą gestu użytkownika.
• Zezwól stronie na zamknięcie obrazu w obrazie.
• Zezwól stronie na sprawdzanie, czy może zostać aktywowany obraz w obrazie.

Tak może to wyglądać:

<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? Prześlij opinię i zgłoś problemy na Repozytorium WICG obrazu w obrazie. Chętnie poznamy swoje przemyślenia.

Zapobieganie domyślnemu działaniu PIP na Androidzie

Obecnie możesz wyłączyć w filmach domyślny sposób obrazu w obrazie na Androidzie w Chrome, odpowiadając na zdarzenie zmiany rozmiaru i wykrywa, czy rozmiar okna znacznie się zmienił (zobacz kod poniżej). Nie zalecamy tego na stałe , ale udostępnia opcję tymczasową 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();
    }
});