Audio/Video Updates in Chrome 73

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

• Hardware media keys are now supported to control media playback on desktop.
• Web developers can query whether a certain HDCP policy can be enforced.
• Auto Picture-in-Picture in desktop PWAs and “Skip Ad” in Picture-in-Picture are coming to origin trials.
• Desktop PWAs are granted autoplay with sound.

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!

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 Chrome OS, 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 Chrome OS 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, nexttrack, seekbackward, and seekforward are currently supported.

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

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

navigator.mediaSession.setActionHandler('seekbackward', function() {
  // User hit "Seek Backward" key.
});

navigator.mediaSession.setActionHandler('seekforward', function() {
  // User hit "Seek Forward" 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 Chrome OS, macOS, and Windows. Linux will come later.

Note: Setting some media session metadata such as the title, artist, album name, and artwork with the Media Session API is available but not hooked up to desktop notifications yet. It will come in supported platforms 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 (PWAs) that users have installed on desktop.

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

Dogfood: To get feedback from web developers, the Auto Picture-in-Picture feature is available as an Origin Trial in Chrome 73 for desktop (Chrome OS, Linux, Mac, and Windows). You will need to request a token, so that the feature is automatically enabled for your origin for a limited period of time. This will eliminate the need to enable the "Web Platform Features" flag.

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.

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

Note: Media session action handlers will persist. I’d suggest always reseting them when media playback starts and ends to avoid showing an unexpected "Skip Ad" button.

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

Dogfood: To get feedback from web developers, the Skip Ad in Picture-in-Picture window feature is available as an Origin Trial in Chrome 73 for desktop (Chrome OS, Linux, Mac, and Windows). You will need to request a token, so that the feature is automatically enabled for your origin for a limited period of time. This will eliminate the need to enable the "Web Platform Features" flag.

Intent to Experiment | Chromestatus Tracker | Chromium Bug

Autoplay granted for Desktop PWAs

Now that Progressive Web Apps (PWAs) 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