HTML 5 Video Auto Play Feature detection

Question

HTML 5 Video play() method is not supported on mobile unless the action is user generated, eg comes from a click/tap. This is fine. What I would like to know is, is there a reliable way to detect if the browser blocks this play() action, when it is not user generated.

For example on desktop in chrome it does not, but on Android it does.

Specifically my problem is that we have a third ad module that requires to know whether it can auto play the ad when we initialize it. For desktop browsers it can always do this, but for mobile browsers it cannot. This recently became a problem when mobile browsers (ios 8 on ipad) started honouring the no controls attribute. Which led to a situation where the ad module would remove the controls, the browser would block the play event and the user would have no native controls to actually start the ad and thus the video. (The ad Module removes the controls to stop you skipping through the ad).

I really want to avoid browser / platform sniffing through the user agent and would like some thing more akin to feature detection.

My current best guess is to check for touch event feature, and assume touch means wont allow play from non user action, but I'm hoping there is something that removes this "best guess".

Answer 1

I believe this is something that can be solved using the Modernizr javascript library, which is used for feature detection in HTML5 and CSS3.

Modernizr achieves this by adding classes to the HTML element of you page after running a quick test of the features available on the page load.

Specifically for your issue of AutoPlay, I believe this example http://codepen.io/davidgenetic/pen/FmHaD demonstrates how you can achieve detection. The javascript required is below.

Modernizr.addTest('autoplay', function(){

    // Audio file data URIs from comments in
    // [this gist](https://gist.github.com/westonruter/253174)
    // via [mudcube](https://github.com/mudcube)
    var mp3 = 'somesong.mp3';

    try {
        var audio = new Audio();
        var src = audio.canPlayType('audio/ogg') ? ogg : mp3;
        audio.autoplay = true;
        audio.volume = 0;

        // this will only be triggered if autoplay works
        audio.addEventListener('play', function() {
            Modernizr.autoplay = true;
          // is there a better way to re-evaluate the html classes added by Modernizr?
          var root = document.getElementsByTagName('html')[0];
          root.classList.remove('no-autoplay');
          root.classList.add('autoplay');

          // or if you're using jQuery:
          // $('html').toggleClass('no-autoplay autoplay');
        }, false);

        audio.src = src;
    } catch(e) {
        console.log('[AUTOPLAY-ERROR]', e);
    }

    return false;
});