Efficiently Detect If A Device Will Play Silent Videos That Have The Autoplay Attribute

With Chrome 53 and iOS 10 both out now, there are now Android and iOS devices that are capable of automatically playing videos that are silent and have the autoplay attribute. I'd

Solution 1:

You can detect video autoplay support by checking if the paused status of a video element changes after it programmatically plays. This alone can return false negatives in some mobile browsers, so a Promise check should be added in order to cover these.

This method works in all major browsers (desktop and mobile), except for Android <= 4.0 and Windows Phone, where it returns a false negative.

Here is the detect function:

var supports_video_autoplay = function(callback) {

  if (typeof callback !== "function") returnfalse;

  var v = document.createElement("video");
  v.paused = true;
  var p = "play"in v && v.play();

  callback(!v.paused || ("Promise"inwindow && p instanceofPromise));

};

Usage:

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

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