Affecting Audible media’s autoplay is now blocked by default

Published: | Categories: Audio & Video, HTML

Description

Starting with Firefox 66, audible audio and video content can no longer be played automatically both on desktop and mobile, requiring user interaction, usually a click on the play button, to start playing the media. Muted <video> and <audio> elements that come with the muted attribute or the volume attribute setting to 0 are still allowed to play. This change aimed at improving Firefox user experience has been tested on the Nightly channel since Firefox 63.

When autoplay is blocked, the HTMLMediaElement.play method will return a rejected Promise, and an error is logged in the browser’s Web Console. The new allowedToPlay property also allows to know in advance if calling the play method would be blocked. The following example shows how web developers can detect blocking of autoplay:

async function play_video() {
  const $video = document.querySelector('video');

  // Detect in advance
  if ($video.allowedToPlay) {
    $video.play();
    // video started to play
  } else {
    // autoplay will be blocked
    // show a play button
  }

  // or use Promise
  try {
    await $video.play();
    // video started to play
  } catch (ex) {
    // autoplay has been blocked
    // show a play button
  }
}

Update: The current plan is turning off blocking autoplay once in Firefox Beta, then gradually rolling out the feature through the Shield Program.

References