automatycznie włączać obraz w obrazie podczas odtwarzania multimediów,

François Beaufort
François Beaufort

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.

Okno Picture-in-picture otwiera się i zamyka automatycznie, gdy użytkownik Spotify przełącza karty.

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.
Automatyczne ustawienie obrazu w obrazie w panelu informacji o stronie w przeglądarce Chrome.

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.
Użytkownik zostaje zapytany, czy zezwala na automatyczne włączanie obrazu w obrazie.

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