Gepubliceerd: 5 februari 2025
Vanaf Chrome 120 kunnen webapps voor videoconferenties automatisch een beeld-in-beeld-venster openen wanneer de gebruiker de focus wijzigt van het huidige tabblad. Dit is handig voor presentatoren die deelnemers in realtime willen zien en ermee willen communiceren terwijl ze een document presenteren of andere tabbladen of vensters gebruiken. Zie Automatische beeld-in-beeld-webapps voor videoconferenties voor meer informatie.
Vanaf Chrome 134 kunnen webapps die audio of video afspelen automatisch naar de beeld-in-beeld-modus gaan. Dit betekent dat muziek- en videospelers op internet nu naadloos kunnen overschakelen naar een minispelervenster wanneer de gebruiker van tabblad wisselt, waardoor handmatige activering niet meer nodig is.
Om deze gebruiksscenario's voor het afspelen van media te ondersteunen, kunnen desktopwebapps vanuit Chrome 134 automatisch beeld-in-beeld invoeren, met enkele beperkingen om een positieve gebruikerservaring te garanderen. Een webapp komt alleen in aanmerking voor automatisch beeld-in-beeld voor het afspelen van media als deze aan alle volgende voorwaarden voldoet:
De topframe-URL is veilig volgens de Safe Browsing-service.
De media leven in het bovenste frame.
De media zijn de afgelopen twee seconden hoorbaar geweest.
De media hebben audiofocus.
De media spelen.
Er is een mediasessie- actiehandler voor de actie
"enterpictureinpicture"geregistreerd.De drempelwaarde voor de Media Engagement Index van de gebruiker is overschreden, wat aangeeft dat de gebruiker regelmatig media gebruikt in deze web-app. Dit is van toepassing als de browserinstelling van de gebruiker 'Kan vragen om beeld-in-beeld in te voeren' is. Als de gebruiker expliciet toestaat dat de webapp beeld-in-beeld invoert, is deze voorwaarde niet van toepassing.
De bug 386193409 volgt de implementatie van oppervlaktevoorwaarden om het debuggen en de implementatie eenvoudiger te maken.
Houd er rekening mee dat als er al een ander Picture-in-Picture-venster geopend is, Chrome geen automatische Picture-in-Picture activeert. Deze regel is niet van toepassing als het bestaande beeld-in-beeld-venster automatisch is geopend en op het punt staat te sluiten.
Wanneer een web-app aan de vereisten voldoet, activeert het verplaatsen van de focus naar een ander tabblad de callback-functie van de mediasessie-actiehandler voor de actie "enterpictureinpicture" . Hierdoor kan de webapp een beeld-in-beeld-venster openen zonder een gebruikersgebaar. De gebruiker kan dan een toestemmingsvenster te zien krijgen, waarin wordt gevraagd of hij de site elke keer automatisch beeld-in-beeld wil laten openen, alleen deze keer, of nooit.
U kunt de Picture-in-Picture API voor <video> gebruiken om een picture-in-picture-venster te openen vanuit een HTML <video> -element, of de Document Picture-in-Picture API om een venster dat altijd op de voorgrond staat te openen en te vullen met willekeurige HTML-inhoud. Het beeld-in-beeld-venster wordt niet scherpgesteld wanneer het wordt geopend en wordt automatisch gesloten wanneer de pagina weer zichtbaar wordt.
In het volgende voorbeeld ziet u hoe u een HTML <video> -element afspeelt wanneer een gebruiker op een knop klikt. Registreer vervolgens veilig een mediasessie-actiehandler voor de actie "enterpictureinpicture" met een callback-functie die een picture-in-picture-venster opent. Dit venster bevat de video met de Picture-in-Picture API voor <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.");
}
Probeer de demo van de VideoJS-speler , waarin de Document Picture-in-Picture API wordt getoond, of speel met de voorbeelden van Video Media Session en Audio Media Session .
Betrek en deel feedback
Als u feedback heeft of problemen ondervindt, kunt u deze delen op crbug.com .
Bronnen
Dankbetuigingen
Met dank aan Benjamin Keen en Frank Liberato voor hun recensies.