Data publikacji: 5 lutego 2025 r.
Od wersji 120 przeglądarki Chrome aplikacje internetowe do wideokonferencji mogą automatycznie otwierać okno obrazu w obrazie, gdy użytkownik przełączy fokus z bieżącej karty. Jest to przydatne dla prezenterów, którzy chcą widzieć uczestników i wchodzić z nimi w interakcje w czasie rzeczywistym podczas prezentowania dokumentu lub korzystania z innych kart lub okien. Więcej informacji znajdziesz w artykule Automatyczny obraz w obrazie w przypadku aplikacji internetowych do rozmów wideo.
Od wersji 134 Chrome aplikacje internetowe odtwarzające dźwięk lub wideo mogą automatycznie włączać tryb obrazu w obrazie. Oznacza to, że odtwarzacze muzyki i filmów w internecie mogą teraz płynnie przełączać się do okna miniodtwarzacza, gdy użytkownik przełącza karty, co eliminuje potrzebę ręcznej aktywacji.
Aby obsługiwać te przypadki użycia odtwarzania multimediów, od Chrome 134 aplikacje internetowe na komputery mogą automatycznie przechodzić w tryb obrazu w obrazie, z kilkoma ograniczeniami, które mają zapewnić użytkownikom dobre wrażenia. Aplikacja internetowa może korzystać z automatycznego obrazu w obrazie podczas odtwarzania multimediów tylko wtedy, gdy spełnia wszystkie te warunki:
Adres URL głównego elementu okna jest bezpieczny według usługi Bezpieczne przeglądanie.
Multimedia znajdują się w górnym polu.
Media były słyszalne w ciągu ostatnich 2 sekund.
Media mają skupienie dźwięku.
Multimedia są odtwarzane.
Zarejestrowano moduł obsługi akcji sesji multimedialnej dla działania
"enterpictureinpicture"
.Przekroczony został próg wskaźnika zaangażowania w multimedia, co oznacza, że użytkownik często korzysta z multimediów w tej aplikacji internetowej. Dotyczy to sytuacji, gdy ustawienie przeglądarki użytkownika to „Może poprosić o włączenie trybu obrazu w obrazie”. Jeśli użytkownik wyraźnie zezwoli aplikacji internetowej na włączenie obrazu w obrazie, ta zasada nie będzie miała zastosowania.
![Automatyczne ustawienie obrazu w obrazie w panelu informacji o witrynie w przeglądarce Chrome.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/browser-setting.jpg?authuser=8&hl=pl)
Błąd 386193409 śledzi implementację warunków wyświetlania, aby ułatwić debugowanie i wdrażanie.
Pamiętaj, że jeśli inne okno obrazu w obrazie jest już otwarte, Chrome nie uruchamia automatycznego obrazu w obrazie. Ta reguła nie ma zastosowania, jeśli istniejące okno obrazu w obrazie zostało otwarte automatycznie i ma się zamknąć.
Gdy aplikacja internetowa spełnia wymagania, przełączenie fokusa na inną kartę powoduje wywołanie funkcji obsługi działania sesji multimedialnej dla działania "enterpictureinpicture"
. Dzięki temu aplikacja internetowa może otworzyć okno obrazu w obrazie bez interwencji użytkownika. Użytkownik może zobaczyć okno z prośbą o uprawnienia, w którym zostanie zapytany, czy chce, aby witryna automatycznie włączała tryb obrazu w obrazie za każdym razem, tylko tym razem czy nigdy.
![Nakładka z prośbą o uprawnienia w oknie obrazu w obrazie, która pyta użytkownika, czy chce automatycznie włączyć obraz w obrazie.](https://developer.chrome.com/static/blog/automatic-picture-in-picture-media-playback/image/pip-window-popup.jpg?authuser=8&hl=pl)
Możesz użyć interfejsu Picture-in-Picture API for <video>, aby otworzyć okno obrazu w obrazie z elementu HTML <video>
, lub interfejsu Document Picture-in-Picture API, aby otworzyć okno zawsze na wierzchu, które wypełnisz dowolnym treścią HTML. Okno obrazu w obrazie nie jest aktywne po otwarciu i zamyka się automatycznie, gdy strona znowu stanie się widoczna.
Z tego przykładu dowiesz się, jak odtwarzać element HTML <video>
, gdy użytkownik kliknie przycisk. Następnie bezpiecznie zarejestruj w przypadku działania "enterpictureinpicture"
moduł obsługi sesji multimediów za pomocą funkcji wywołania zwrotnego, która otwiera okno obrazu w obrazie. To okno zawiera film z interfejsem Picture-in-Picture API dla <video>.
const video = document.querySelector("video");
async function onPlayButtonClick() {
// Play video.
await video.play();
}
try {
// Request video to automatically enter picture-in-picture when eligible.
navigator.mediaSession.setActionHandler("enterpictureinpicture", async () => {
await video.requestPictureInPicture();
});
} catch (error) {
console.log("The enterpictureinpicture action is not yet supported.");
}
Wypróbuj demo odtwarzacza VideoJS, który demonstruje interfejs API Picture-in-Picture do dokumentów, lub wypróbuj przykłady sesji multimediów wideo i sesji multimediów audio.
Angażowanie użytkowników i przesyłanie opinii
Jeśli chcesz podzielić się opinią lub napotkasz problemy, możesz to zrobić na stronie crbug.com.
Zasoby
Poświadczenia
Dziękujemy Benjaminowi Keenowi i Frankowi Liberato za opinie.