How do I detect if the HTML5 autoplay attribute is supported?

feklee picture feklee · Aug 19, 2011 · Viewed 25.2k times · Source

How do I best detect whether a browser's HTML5 video element supports autoplay?

On current iOS Safari, for example, autoplay is disabled.

Update: I now designed the web page in such a way that it works irrespective of whether autoplay is supported. Now when the page is loaded an initialization video is shown. On an iPad, the user is presented with a big play button. Once playback has been triggered, the video is hidden. Afterwards, playback of the video player can be controlled from JavaScript, which is what I actually need.

Answer

schellmax picture schellmax · Apr 14, 2015

A little late to the party, but the accepted solution seems outdated: Modernizr now has implemented this feature, see https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js

Contains similar hacks to the other solutions posted here though, but as long as browsers don't expose availabilty of this feature, this seems to be the best solution for now.

Note that this an async test available since Modernizr 3, so you have to use the following .on() syntax for your test:

Modernizr.on('videoautoplay', function(result){
  if(result) {
    alert('video autoplay is supported');
  }  else {
    alert('video autplay is NOT supported');
  }
});

See for yourself: http://codepen.io/anon/pen/VYoWWY?editors=001

The above sample includes Modernizr 3 with the 'videoautplay' feature detection (http://v3.modernizr.com/download/#-videoautoplay).