Automatyczne włączanie obrazu w obrazie w przypadku większej liczby witryn

Benjamin Keen
Benjamin Keen
François Beaufort
François Beaufort
GitHub

Data publikacji: 18 marca 2026 r.

Od Chrome 142 aplikacje internetowe, które odtwarzają dźwięk lub wideo, mogą automatycznie przechodzić w tryb obrazu w obrazie, jeśli zarejestrują procedurę obsługi działania sesji multimedialnej. To świetne rozwiązanie dla odtwarzaczy muzyki i wideo, ale wymaga od deweloperów wyraźnego wdrożenia obsługi.

Aby zapewnić płynną obsługę wielu zadań związanych z multimediami i ułatwić odkrywanie funkcji obrazu w obrazie (PiP), Chrome wprowadza automatyczne włączanie tej funkcji inicjowane przez przeglądarkę. Ta funkcja umożliwia Chrome automatyczne otwieranie okna PiP z filmem w przypadku witryn, które nie zarejestrowały modułu obsługi działania sesji multimedialnej. Dzięki temu treści multimedialne pozostaną widoczne po przełączeniu kart.

Instrukcje

  • Używaj Chrome w wersji 142 lub nowszej na komputerze.
  • Włącz opcję „Automatyczny obraz w obrazie inicjowany przez przeglądarkę” w chrome://flags/#browser-initiated-automatic-picture-in-picture i ponownie uruchom Chrome.
  • Otwórz stronę z filmami i odtwórz film (przykład).
  • Przełącz się na inną kartę Chrome, aby wywołać okno PiP z filmem.

Jak to działa

Gdy odtwarzasz multimedia i przełączysz się na inną kartę, Chrome może automatycznie przenieść multimedia do okna obrazu w obrazie, które zawsze znajduje się na wierzchu. W przeciwieństwie do obecnej funkcji „Automatyczny obraz w obrazie podczas odtwarzania multimediów”, która obsługuje filmy lub dowolne treści HTML (za pomocą interfejsu Document Picture-in-Picture API), żądania inicjowane przez przeglądarkę zawsze otwierają standardowe okno obrazu w obrazie.

Aby zapewnić użytkownikom wysoką jakość i nieuciążliwość, Chrome wywołuje to zachowanie tylko wtedy, gdy spełniony jest ścisły zestaw warunków:

  • Adres URL ramki najwyższego poziomu jest bezpieczny zgodnie z usługą Bezpieczne przeglądanie.
  • Media znajdują się w górnej ramce.
  • Multimedia były słyszalne w ciągu ostatnich 2 sekund.
  • Multimedia mają aktywność audio i są odtwarzane.
  • Istnieje jeden „normalny” odtwarzacz, czyli wyciszony element multimedialny, który został odtworzony i nie korzysta z MediaStream.
  • Element multimedialny musi zawierać ścieżkę wideo.
  • Witryna nie używa aktywnie kamery ani mikrofonu.
  • Przekroczono próg wskaźnika zaangażowania w media użytkownika, co wskazuje na częste korzystanie z witryny. Ten warunek jest spełniony, jeśli użytkownik nie zezwolił na korzystanie z tej funkcji ani nie odmówił.
  • Obecnie nie jest otwarte żadne okno PiP. Jeśli inne okno PiP jest już otwarte, Chrome nie uruchomi automatycznego przejścia.
Porównanie automatycznego trybu obrazu w obrazie inicjowanego przez przeglądarkę (witryna bez procedury obsługi działania enterpictureinpicture) i automatycznego trybu obrazu w obrazie w przypadku odtwarzania multimediów (witryna, w której zarejestrowano procedurę obsługi).

Kontrola użytkownika i prywatność

Automatyczne uruchamianie obrazu w obrazie zainicjowane przez przeglądarkę podlega tym samym uprawnieniom i ustawieniom użytkownika co żądania zainicjowane przez witrynę. Gdy witryna po raz pierwszy automatycznie przechodzi w tryb obrazu w obrazie, Chrome wyświetla użytkownikom okno z prośbą o zgodę na takie działanie w przyszłości.

Użytkownicy mogą też w dowolnym momencie zarządzać tymi uprawnieniami w sekcji „Ustawienia witryny”.

Kontrola dewelopera i rezygnacja

Ta funkcja jest zaprojektowana tak, aby działać od razu w przypadku większości witryn z filmami, ale możesz z niej zrezygnować.

Implementowanie własnego modułu obsługi

Jeśli aplikacja internetowa rejestruje już moduł obsługi działania sesji multimedialnej dla działania enterpictureinpicture, Twoja implementacja ma pierwszeństwo, a Chrome nie inicjuje własnego automatycznego przejścia.

Jeśli chcesz dostosować działanie, gdy Chrome uzna, że przejście jest odpowiednie, w obsłudze działania enterpictureinpicture znajduje się reason w MediaSessionActionDetails. Możesz sprawdzić, czy reason ma wartość contentoccluded (co oznacza, że przeglądarka zainicjowała żądanie, ponieważ karta była ukryta), i zdecydować, co dalej zrobić.

navigator.mediaSession.setActionHandler("enterpictureinpicture", (details) => {
  if (details.reason === "contentoccluded") {
    // The browser suggests entering Picture-in-Picture.
    // You can choose to open a standard video PiP or a Document PiP window, or do
    // nothing (effectively blocking browser-initiated Auto Picture-in-Picture).
  }
});

Sprawdzone metody dotyczące sesji multimedialnej

W przypadku automatycznego trybu obrazu w obrazie inicjowanego przez przeglądarkę konfiguracja sesji multimedialnej pomaga Chrome zrozumieć Twoje treści i wchodzić z nimi w interakcję. Prawidłowo skonfigurowany MediaSession zapewnia wysoką jakość okna PiP z dokładnymi elementami sterującymi i informacjami dla użytkowników.

Synchronizowanie paska postępu

Jeśli używany jest interfejs setPositionState API, a pozycja sesji multimedialnej nie jest prawidłowo aktualizowana, okna PiP wyświetlają niedokładny pasek postępu podczas odtwarzania multimediów. Aby temu zapobiec, zawsze aktualizuj lub usuwaj wartość position state za pomocą navigator.mediaSession.setPositionState() (np. gdy źródło multimediów ulegnie zmianie lub zostanie zresetowane), aby okno PiP odzwierciedlało prawidłową pozycję odtwarzanych multimediów.

const video = document.querySelector('video');

function updatePositionState() {
  if ('setPositionState' in navigator.mediaSession) {
    navigator.mediaSession.setPositionState({
      duration: video.duration,
      playbackRate: video.playbackRate,
      position: video.currentTime,
    });
  }
}

// Update when metadata is loaded or when seeking happens.
video.addEventListener("loadedmetadata", updatePositionState);
video.addEventListener("seeked", updatePositionState);

Płynne przejścia

Jeśli Twoja witryna automatycznie odtwarza „Następny odcinek”, upewnij się, że MediaSession funkcje obsługi działań i metadane pozostają aktywne i prawidłowe przez cały czas przejścia. Jeśli podczas przejścia do elementu „Dalej” moduły obsługi działań zostaną usunięte lub wyłączone, okno PiP może utracić funkcje, które były przez nie zapewniane.

Włącz pełną kontrolę

Oprócz podstawowych funkcji odtwarzania i wstrzymywania rozważ wdrożenie obsługi zdarzeń seekto, previoustrack i nexttrack. Dzięki temu użytkownicy mogą przeglądać treści bezpośrednio w oknie PIP bez wracania do pierwotnej karty.

navigator.mediaSession.setActionHandler("seekto", (details) => {
  if (details.fastSeek && "fastSeek" in video) {
    video.fastSeek(details.seekTime);
    return;
  }
  video.currentTime = details.seekTime;
});

Zaangażuj się i prześlij opinię

Jeśli masz uwagi lub napotkasz problemy związane z tym działaniem, podziel się nimi na stronie crbug.com.

Zasoby