Media-updates in Chrome 73

François Beaufort

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!

Mediatoetsen op het toetsenbord

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.

Opmerking: het instellen van bepaalde metagegevens van mediasessies, zoals de titel, artiest, albumnaam en illustraties met de Media Session API, is beschikbaar, maar nog niet gekoppeld aan bureaubladmeldingen. Het zal later op ondersteunde platforms verschijnen.

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 autopictureinpicture het 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.

Opmerking: om feedback van webontwikkelaars te krijgen, is de functie Automatische Picture-in-Picture beschikbaar als [origin-proefversie] in Chrome 73 voor desktop (ChromeOS, Linux, Mac en Windows). U moet [een token aanvragen], zodat de functie voor een beperkte periode automatisch wordt ingeschakeld voor uw oorsprong. Dit elimineert de noodzaak om de vlag "Webplatformfuncties" in te schakelen.

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.

Knop 'Advertentie overslaan' in het Picture-in-Picture-venster

Om deze functie te bieden, geeft u een functie met skipad door bij het aanroepen 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.
}

Let op: Actiehandlers voor mediasessies blijven bestaan. Ik raad aan om ze altijd opnieuw in te stellen wanneer het afspelen van media begint en eindigt, om te voorkomen dat er een onverwachte knop 'Advertentie overslaan' wordt weergegeven.

Probeer het officiële voorbeeld van 'Advertentie overslaan' en laat ons weten hoe deze functie kan worden verbeterd.

Opmerking: om feedback van webontwikkelaars te krijgen, is de functie Advertentie overslaan in Picture-in-Picture-venster beschikbaar als [origin-proefversie] in Chrome 73 voor desktop (ChromeOS, Linux, Mac en Windows). U moet [een token aanvragen], zodat de functie voor een beperkte periode automatisch wordt ingeschakeld voor uw oorsprong. Dit elimineert de noodzaak om de vlag "Webplatformfuncties" in te schakelen.

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.

Chroombug