Modernizr: HTML5 Video autoplay test does not give reliable results

I created a custom build of Modernizr with latest video, video/autoplay and video/loop tests. When listening to the async autoplay test with .on I have noticed that in Chrome 30 stable on OS X the test sometimes returns true and sometimes false. Firefox 26 beta 4 on OS X returns false every time.

As I was trying to understand what is going on, I added a 200ms timeout to testAutoplay function. Delaying the elem.currentTime !== 0 test by 200ms made the test pass on every page refresh I did in Chrome and FF.

I tried updating the videoautoplay test with code from this PR https://github.com/Modernizr/Modernizr/pull/1018 and running the test after that, but looks like that does not help.

Is there a better way of fixing this, since adding a timeout to delay the test does not sound very optimal?

Oh yeah, here is my test html file:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="modernizr-build.js"></script>
</head>
<body>
<script>
    Modernizr.on('videoautoplay', function (hasAutoplay) {
        console.log(hasAutoplay);
    });
</script>
</body>
</html>

About this issue

Original URL
State: open
Created 11 years ago
Comments: 60 (14 by maintainers)

Commits related to this issue

Temporary Modernizr videoautoplay fallback As it turns out, the videoautoplay Modernizr test is [is not entirely reliable](https://github.com/Modernizr/Modernizr/issues/1095). @mfairchild365 has subm... — committed to skoolbus39/wdntemplates by skoolbus39 8 years ago

Most upvoted comments

The solution presented by @sarukuku is great, but it falls short in browsers that don’t support Promises but do support video autoplay (notably IE 9–11).

His approach inspired me to explore another solution, which was succesfully tested on:

IE 8–11, Edge (Windows);
Chrome, Firefox (Windows, macOS, Linux Ubuntu, iOS, Android);
Safari (macOS, iOS);
Samsung Browser (Android).

var supports_video_autoplay = function(callback) {

  var v = document.createElement("video");
  v.paused = true;
  var p = "play" in v && v.play();
  
  typeof callback === "function" && callback(!v.paused || "Promise" in window && p instanceof Promise);
  
};

A Promise return check is necessary to cover some false negatives (mainly from mobile browsers).

Usage:

supports_video_autoplay(function(supported) {
  if (supported) {
    // video autoplay supported!
  } else {
    // no video autoplay support :(
  }
});

Live test: codepen.io/paulorely/pen/QveEGy

+11

paulorely on Jul 17, 2017

New browsers can these days autoplay video even on mobile. As testing the autoplay is a pain in the ass to do reliably by loading a video and trying to check if it has played or not how about lifting the limit of what “cuts the mustard” and relying on the return of Promise from the play() method instead of actually trying to determine if the video is playing?

I understand that this might be not the way this test wants to go but I’ll just drop my current demo solution here. Maybe someone will find it useful when googling for this. It swaps the video with a fallback image if the play() method doesn’t return a Promise. Tested and works on new and bit older iOS, Android and desktop browsers.

sarukuku on May 3, 2017

Best way to detect if autoplay is supported: https://googlechrome.github.io/samples/play-return-promise/index.html

jimmywarting on May 28, 2016

@paulorely Excellent work! I’ve updated the example to use your method. It has the opinionated image replacement fallback. I also tested the updated example with various old & new desktop & mobile browsers and it seems to perform very well (= doesn’t work on Nokia Lumia & Androind <= 4.0).

I’ll create a pull request of this for Modernizr.

sarukuku on May 30, 2017