How to detect if Chrome/Safari/Firefox prevented autoplay for video? How to detect if Chrome/Safari/Firefox prevented autoplay for video? google-chrome google-chrome

How to detect if Chrome/Safari/Firefox prevented autoplay for video?


The autoplay attribute

According to web standard specifications, the autoplay attribute should only be a hint for what the browser should to with the media element. Neither of W3 of WHATWG web specifications mentions anything about when to prevent autoplay for media, which means that each browser probably have different implementations.

Autoplay policies

Autoplay policies implemented by each browser now govern whether video should be allowed to autoplay.

  • Chrome uses something they call MediaEngagement Index and you can read more about that here and their autoplay policy here.

  • Safari developers made a post on webkit.orgregarding this.

  • Firefox seems to put it in the hands of the user to choose if it's allowed or not (link).

Best practices

Detecting if autoplay is disabled

Instead of using autoplay on your element, you can use the play() method on the video and audio element to start playing your media. The play() method returns a promise in modern browsers (all according to the spec). If the promise rejects, it can indicate that autoplay is disabled in the current browser on your site.

can-autoplay is a library solely for detecting autoplay features for both video and audio elements.

If autoplay is disabled

The good thing is that when you know that autoplay is disabled you can, in some browsers, then mute the video and try the play() method again, while showing something in the UI that says that the video is playing while muted.

var video = document.querySelector('video');var promise = video.play();if (promise !== undefined) {  promise.then(_ => {    // Autoplay started!  }).catch(error => {    // Autoplay not allowed!    // Mute video and try to play again    video.muted = true;    video.play();    // Show something in the UI that the video is muted  });}
<video src="https://www.w3schools.com/tags/movie.ogg" controls></video>