Media updates in Chrome 73

François Beaufort
François Beaufort
GitHub

In this article, I'll discuss Chrome 73 new media features which include:

Hardware Media Keys support

Many keyboards nowadays have keys to control basic media playback functions such as play/pause, previous and next track. Headsets have them too. Until now, desktop users couldn't use these media keys to control audio and video playback in Chrome. This changes today!

Keyboard media keys
Keyboard media keys

If user presses the pause key, the active media element playing in Chrome will be paused and receive a "paused" media event. If the play key is pressed, the previously paused media element will be resumed and receive a "play" media event. It works whether Chrome is in foreground or background.

In ChromeOS, Android apps using audio focus will now tell Chrome to pause and resume audio to create a seamless media experience between websites on Chrome, Chrome Apps and Android Apps. This is currently supported only on ChromeOS device running Android P.

In short, it's a good practice to always listen to these media events and act accordingly.

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

But wait, there's more! With the Media Session API now available on desktop (it was supported on mobile only before), web developers can handle media related events such as track changing that are triggered by media keys. The events previoustrack and nexttrack are currently supported.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Play and pause keys are handled automatically by Chrome. However if the default behavior doesn't work out for you, you can still set some action handlers for "play" and "pause" to prevent this.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

Hardware Media Keys support is available on ChromeOS, macOS, and Windows. Linux will come later.

Check out our existing developer documentation and try out the official Media Session samples.

Chromestatus Tracker | Chromium Bug

Encrypted Media: HDCP Policy Check

Thanks to the HDCP Policy Check API, web developers can now query whether a specific policy, e.g. HDCP requirement, can be enforced before requesting Widevine licenses, and loading media.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

The API is available on all platforms. However, the actual policy checks might not be available on certain platforms. For example, HDCP policy check promise will reject with NotSupportedError on Android and Android WebView.

Check out our previous developer documentation and give a try to the official sample to see all HDCP versions that are supported.

Intent to Ship | Chromestatus Tracker | Chromium Bug

Origin Trial for Auto Picture-in-Picture for installed PWAs

Some pages may want to automatically enter and leave Picture-in-Picture for a video element; for example, video conferencing web apps would benefit from some automatic Picture-in-Picture behavior when user switches back and forth between the web app and other applications or tabs. This is sadly not possible with the user gesture requirement. So here comes Auto Picture-in-Picture!

To support these tab and app switching, a new autopictureinpicture attribute is added to the <video> element.

<video autopictureinpicture></video>

Here's roughly how it works:

  • When document becomes hidden, the video element whose autopictureinpicture attribute was set most recently automatically enters Picture-in-Picture, if allowed.
  • When document becomes visible, the video element in Picture-in-Picture automatically leaves it.

And that's it! Note that the Auto Picture-in-Picture feature applies only to Progressive Web Apps that users have installed on desktop.

Check out the spec for more details and try out using the official PWA sample.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

Origin Trial for Skip Ad in Picture-in-Picture window

The video advertisement model usually consists of pre-roll ads. Content providers often provide the ability to skip the ad after a few seconds. Sadly, as the Picture-in-Picture window is not interactive, users watching a video in Picture-in-Picture can't do this today.

With the Media Session API now available on desktop (it was supported on mobile only before), a new skipad media session action may be used to offer this option in Picture-in-Picture.

Skip Ad button in Picture-in-Picture window
"Skip Ad" button in Picture-in-Picture window

To provide this feature pass a function with skipad when calling setActionHandler(). To hide it pass null. As you can read below, it is pretty straightforward.

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

Try out the official "Skip Ad" sample and let us know how this feature can be improved.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

Autoplay granted for Desktop PWAs

Now that Progressive Web Apps are available on all desktop platforms, we are extending the rule that we had on mobile to desktop: autoplay with sound is now allowed for installed PWAs. Note that it only applies to pages in the scope of the web app manifest.

Chromium Bug