Od kwietnia 2017 roku Chrome na Androida O obsługuje obraz w obrazie.
Pozwala użytkownikom odtwarzać element <video> w małym oknie nakładki, które nie jest zasłonięte przez inne okna, i jednocześnie wykonywać inne czynności.
Jak to działa: otwórz Chrome, wejdź na stronę z filmem i włącz go na pełnym ekranie. Potem naciśnij przycisk ekranu głównego, aby przejść do ekranu głównego Androida, a odtwarzany film automatycznie przełączy się w obraz w obrazie. To wszystko. Całkiem nieźle, prawda?
Tak, ale co z komputerami? A jeśli witryna chce mieć kontrolę nad tym procesem?
Dobra wiadomość jest taka, że w trakcie opracowywania specyfikacji interfejsu Picture-in-Picture Web API jest już opracowywana. Ta specyfikacja ma umożliwić witrynom inicjowanie i kontrolowanie tego zachowania przez udostępnienie interfejsu API następującego zestawu właściwości:
- powiadamia stronę internetową, gdy film pojawi się w trybie obrazu w obrazie i z niego wyjdzie.
- Zezwalaj witrynie na uruchamianie obrazu w obrazie w elemencie wideo za pomocą gestu użytkownika.
- Zezwól witrynie na wyłączenie trybu obrazu w obrazie.
- Pozwól witrynie sprawdzić, czy można włączyć tryb obrazu 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 myślisz? Prześlij opinię i zgłoś problemy w repozytorium WICG obrazu w obrazie. Chętnie poznamy Twoje zdanie.
Zapobieganie domyślnemu zachowaniu okna PIP na Androidzie
Obecnie możesz zapobiec wykorzystywaniu domyślnego działania funkcji obraz w obrazie na Androidzie w Chrome, odpowiadając na zdarzenie zmiany rozmiaru i wykrywając, kiedy rozmiar okna znacznie się zmieni (zobacz kod poniżej). Nie jest to zalecane rozwiązanie trwałe, ale stanowi tymczasowe rozwiązanie, które będzie stosowane do czasu zaimplementowania 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();
}
});