In dit artikel bespreek ik de nieuwe mediafuncties van Chrome 73, waaronder:
- Hardwaremediatoetsen worden nu ondersteund om het afspelen van media op het bureaublad te regelen.
- Webontwikkelaars kunnen zich afvragen of een bepaald HDCP-beleid kan worden afgedwongen .
- Automatische Picture-in-Picture in desktop-PWA's en 'Advertentie overslaan' in Picture-in-Picture komen binnenkort beschikbaar in originele proefversies.
- Desktop PWA's krijgen automatisch afspelen met geluid .
Ondersteuning voor hardwaremediatoetsen
Veel toetsenborden hebben tegenwoordig toetsen waarmee je de basisfuncties voor het afspelen van media kunt bedienen, zoals afspelen/pauzeren, vorige en volgende track. Headsets hebben ze ook. Tot nu toe konden desktopgebruikers deze mediatoetsen niet gebruiken om het afspelen van audio en video in Chrome te regelen. Dit verandert vandaag!
Als de gebruiker op de pauzetoets drukt, wordt het actieve media-element dat in Chrome wordt afgespeeld, gepauzeerd en ontvangt het een 'gepauzeerd' media-evenement. Als de afspeeltoets wordt ingedrukt, wordt het eerder gepauzeerde media-element hervat en ontvangt het een mediagebeurtenis "afspelen". Het werkt ongeacht of Chrome zich op de voorgrond of op de achtergrond bevindt.
In ChromeOS vertellen Android-apps die audiofocus gebruiken Chrome nu om audio te pauzeren en te hervatten om een naadloze media-ervaring te creëren tussen websites in Chrome, Chrome-apps en Android-apps. Dit wordt momenteel alleen ondersteund op ChromeOS-apparaten met Android P.
Kortom, het is een goede gewoonte om altijd naar deze media-evenementen te luisteren en dienovereenkomstig te handelen.
video.addEventListener('pause', function() {
// Video is now paused.
// TODO: Let's update UI accordingly.
});
video.addEventListener('play', function() {
// Video is now playing.
// TODO: Let's update UI accordingly.
});
Maar wacht, er is meer! Nu de Media Session API beschikbaar is op desktop (voorheen werd deze alleen op mobiel ondersteund), kunnen webontwikkelaars mediagerelateerde gebeurtenissen afhandelen, zoals trackwijzigingen die worden geactiveerd door mediatoetsen. De evenementen previoustrack en nexttrack worden momenteel ondersteund.
navigator.mediaSession.setActionHandler('previoustrack', function() {
// User hit "Previous Track" key.
});
navigator.mediaSession.setActionHandler('nexttrack', function() {
// User hit "Next Track" key.
});
De afspeel- en pauzetoetsen worden automatisch afgehandeld door Chrome. Als het standaardgedrag echter niet werkt, kunt u nog steeds enkele actiehandlers instellen voor "afspelen" en "pauzeren" om dit te voorkomen.
navigator.mediaSession.setActionHandler('play', function() {
// User hit "Play" key.
});
navigator.mediaSession.setActionHandler('pause', function() {
// User hit "Pause" key.
});
Ondersteuning voor hardwaremediatoetsen is beschikbaar op ChromeOS, macOS en Windows. Linux komt later.
Bekijk onze bestaande ontwikkelaarsdocumentatie en probeer de officiële Media Session-voorbeelden .
Chromestatustracker | Chroombug
Gecodeerde media: HDCP-beleidscontrole
Dankzij de HDCP Policy Check API kunnen webontwikkelaars nu opvragen of een specifiek beleid, bijvoorbeeld de HDCP- vereiste, kan worden afgedwongen voordat ze Widevine-licenties aanvragen en media laden.
const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });
if (status == 'usable')
console.log('HDCP 2.2 can be enforced.');
De API is beschikbaar op alle platforms. De feitelijke beleidscontroles zijn echter mogelijk niet beschikbaar op bepaalde platforms. De belofte van HDCP-beleidscontrole wordt bijvoorbeeld afgewezen met NotSupportedError op Android en Android WebView.
Bekijk onze eerdere ontwikkelaarsdocumentatie en probeer het officiële voorbeeld om alle HDCP-versies te zien die worden ondersteund.
Intentie om te verzenden | Chromestatustracker | Chroombug
Origin-proefversie voor automatische Picture-in-Picture voor geïnstalleerde PWA's
Sommige pagina's willen mogelijk automatisch Picture-in-Picture openen en verlaten voor een video-element; Webapps voor videoconferenties zouden bijvoorbeeld baat hebben bij automatisch Picture-in-Picture-gedrag wanneer de gebruiker heen en weer schakelt tussen de webapp en andere applicaties of tabbladen. Dit is helaas niet mogelijk met de vereiste voor gebaren van gebruikers . Dus hier is Automatische Picture-in-Picture!
Om dit schakelen tussen tabbladen en apps te ondersteunen, is een nieuw autopictureinpicture attribuut toegevoegd aan het <video> -element.
<video autopictureinpicture></video>
Hier ziet u ongeveer hoe het werkt:
- Wanneer het document verborgen raakt, wordt het video-element waarvan het kenmerk
autopictureinpicturehet meest recent is ingesteld, automatisch naar Picture-in-Picture gegaan, indien toegestaan. - Wanneer het document zichtbaar wordt, verlaat het video-element in Picture-in-Picture dit automatisch.
En dat is het! Houd er rekening mee dat de functie Automatische Picture-in-Picture alleen van toepassing is op Progressive Web Apps die gebruikers op het bureaublad hebben geïnstalleerd.
Bekijk de specificaties voor meer details en probeer het officiële PWA-voorbeeld uit.
Intentie om te experimenteren | Chromestatustracker | Chroombug
Origin-proefversie voor het overslaan van advertenties in Picture-in-Picture-venster
Het videoadvertentiemodel bestaat meestal uit preroll-advertenties. Contentproviders bieden vaak de mogelijkheid om de advertentie na een paar seconden over te slaan. Helaas, omdat het Picture-in-Picture-venster niet interactief is, kunnen gebruikers die een video bekijken in Picture-in-Picture dit vandaag niet doen.
Nu de Media Session API nu beschikbaar is op desktop (deze werd voorheen alleen op mobiel ondersteund), kan een nieuwe mediasessie-actie skipad worden gebruikt om deze optie in Picture-in-Picture aan te bieden.
Om deze functie te bieden, geeft u een functie met skipad door bij het aanroepen van setActionHandler() . Om het te verbergen, geef je null door. Zoals je hieronder kunt lezen, is het vrij eenvoudig.
try {
navigator.mediaSession.setActionHandler('skipad', null);
showSkipAdButton();
} catch(error) {
// The "Skip Ad" media session action is not supported.
}
function showSkipAdButton() {
// The Picture-in-Picture window will show a "Skip Ad" button.
navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}
function onSkipAdButtonClick() {
// User clicked "Skip Ad" button, let's hide it now.
navigator.mediaSession.setActionHandler('skipad', null);
// TODO: Stop ad and play video.
}
Probeer het officiële voorbeeld van 'Advertentie overslaan' en laat ons weten hoe deze functie kan worden verbeterd.
Intentie om te experimenteren | Chromestatustracker | Chroombug
Autoplay verleend voor desktop-PWA's
Nu Progressive Web Apps beschikbaar zijn op alle desktopplatforms, breiden we de regel die we hadden op mobiel uit naar desktop: autoplay met geluid is nu toegestaan voor geïnstalleerde PWA's. Houd er rekening mee dat dit alleen van toepassing is op pagina's die binnen het bereik van het web-app-manifest vallen .