Schakel automatisch Picture-in-Picture in op meer websites.

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

Gepubliceerd: 18 maart 2026

Vanaf Chrome 142 kunnen webapps die audio of video afspelen automatisch overschakelen naar de Picture-in-Picture-modus als ze een media-sessie -actiehandler registreren. Dit is een geweldige toevoeging voor muziek- en videospelers, maar vereist wel dat ontwikkelaars de ondersteuning expliciet implementeren.

Om een ​​naadloze ervaring te bieden bij het multitasken met media en de vindbaarheid van Picture-in-Picture (PiP) te verbeteren, introduceert Chrome de door de browser geïnitieerde Auto PiP-functie. Met deze functie kan Chrome automatisch een video-PiP-venster openen voor websites die geen media-sessie-actiehandler hebben geregistreerd. Dit zorgt ervoor dat uw media-inhoud zichtbaar blijft wanneer u van tabblad wisselt.

Instructies

  • Gebruik Chrome 142 of een latere versie op je desktop.
  • Schakel 'Automatisch beeld-in-beeld inschakelen via de browser' in via chrome://flags/#browser-initiated-automatic-picture-in-picture en herstart Chrome.
  • Ga naar een videowebsite en speel een video af ( voorbeeld ).
  • Schakel over naar een ander Chrome-tabblad om een ​​PiP-videovenster te activeren.

Hoe het werkt

Wanneer je media afspeelt en naar een ander tabblad overschakelt, kan Chrome de media automatisch in een altijd-bovenstaand video-PiP-venster plaatsen. In tegenstelling tot de bestaande functie "Automatische PiP voor mediaweergave", die zowel video als willekeurige HTML-inhoud ondersteunt (met behulp van de Document Picture-in-Picture API ), openen door de browser geïnitieerde verzoeken altijd een standaard video-PiP-venster.

Om een ​​hoogwaardige en niet-storende gebruikerservaring te garanderen, activeert Chrome dit gedrag alleen wanneer aan een strikte reeks voorwaarden wordt voldaan:

  • De URL in het bovenste frame is veilig volgens de Safe Browsing-service.
  • De media bevindt zich in het bovenste frame.
  • De media waren de afgelopen twee seconden nog hoorbaar.
  • Het medium heeft audio als focus en wordt afgespeeld.
  • Er is één "normale" speler, dat wil zeggen een media-element dat is afgespeeld en geen MediaStream gebruikt.
  • Het media-element moet een videospoor hebben.
  • De website maakt geen actief gebruik van de camera of microfoon.
  • De drempelwaarde van de Media Engagement Index van de gebruiker is overschreden, wat wijst op frequent gebruik van de site. Deze voorwaarde is van toepassing als de gebruiker de functie niet expliciet heeft toegestaan ​​of geweigerd.
  • Er is momenteel geen PiP-venster geopend. Als er al een ander PiP-venster geopend is, activeert Chrome geen automatische overgang.
Vergelijking van door de browser geïnitieerde Auto PiP (site zonder een enterpictureinpicture -actiehandler) en Auto PiP voor het afspelen van media (waarbij de site de handler heeft geregistreerd).

Gebruikerscontrole en privacy

Browsergestuurde automatische Picture-in-Picture (PiP) respecteert dezelfde gebruikersrechten en -instellingen als site-geïnitieerde verzoeken. De eerste keer dat een site automatisch PiP activeert, toont Chrome gebruikers een dialoogvenster waarin wordt gevraagd of ze dit gedrag voor die site in de toekomst willen toestaan.

Gebruikers kunnen deze machtigingen ook op elk moment beheren via de " Site-instellingen ".

Controle en afmelden door de ontwikkelaar

Hoewel deze functie is ontworpen om standaard te werken op de meeste videosites, kunt u zich hiervoor afmelden.

Implementeer je eigen handler.

Als uw webapplicatie al een media-sessie-actiehandler registreert voor de enterpictureinpicture actie, heeft uw implementatie voorrang en start Chrome geen eigen automatische overgang.

Als je het gedrag wilt aanpassen wanneer Chrome een overgang nodig acht, bevat de actiehandler enterpictureinpicture een reason in de MediaSessionActionDetails . Je kunt controleren of de reason contentoccluded is (wat betekent dat de browser het verzoek heeft geïnitieerd omdat het tabblad verborgen was) en bepalen hoe je verder wilt gaan.

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).
  }
});

Beste praktijken voor een mediasessie

Met browsergestuurde Auto PiP helpt uw ​​mediasessieconfiguratie Chrome uw content te begrijpen en ermee te interageren. Een goed geconfigureerde MediaSession zorgt ervoor dat het PiP-venster een hoogwaardige ervaring biedt met nauwkeurige bedieningselementen en informatie voor gebruikers.

Houd de voortgangsbalk synchroon.

Als de setPositionState API wordt gebruikt en de positie van de mediasessie niet correct wordt bijgewerkt, wordt in PiP-vensters een onjuiste voortgangsbalk weergegeven tijdens het afspelen van media. Om dit te voorkomen, moet u de position state altijd bijwerken of verwijderen met navigator.mediaSession.setPositionState() wanneer dit nodig is (bijvoorbeeld wanneer de mediabron verandert of wordt gereset), zodat het PiP-venster de juiste positie voor de afspelende media weergeeft.

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);

Ga soepel om met overgangen.

Als uw site automatisch een "Volgende aflevering" afspeelt, zorg er dan voor dat uw MediaSession actiehandlers en -metadata actief en correct blijven gedurende de overgang. Als actiehandlers worden verwijderd of niet ingesteld tijdens de overgang naar een "Volgend"-element, kan het PiP-venster de functionaliteit verliezen die door de handler werd geboden.

Volledige controle inschakelen

Naast de basisfuncties voor afspelen en pauzeren, kunt u overwegen om handlers te implementeren voor seekto , previoustrack en nexttrack . Hiermee kunnen gebruikers rechtstreeks vanuit het PiP-venster door uw content navigeren zonder terug te hoeven keren naar het oorspronkelijke tabblad.

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

Betrek de deelnemers en deel je feedback.

Als u feedback heeft of problemen ondervindt met dit gedrag, kunt u deze melden op crbug.com .

Bronnen