How to Detect If The HTML5 Autoplay Attribute Is Supported

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

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).

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 Media
  Engagement Index and you can read more about that here and their autoplay policy here.

• Safari developers made a post on webkit.org
  regarding 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.

When 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>

HTML5 - Check if autoplay is allowed

Just playing or even buffering songs isn't especially fair, when there is the slightest chance people can be on the site for other reasons, like for example to check for updates, to share the link. people can be on the page with a mobile network, with limited bandwidth and downloads of those sizes shouldn't ever start sneaky behind their back.

edit: a few additional references

Here is an overview over the reasons not to have music on autoplay

And contrary, a website I personally like a lot with a great use of background music on autoplay

But if you are already building your own player and want that to be a feature of the page, setting that player to autoplay would not only devalue your own work, totally break your design. Instead you could just trust that people who want to hear the music will identify your audio player and use it.

To fully implement your custom player GUI you may want to listen for all audio events on the player element and update your view accordingly. The event you are looking for is "canplaythrough" but you probably want to react to at least most of the other events too. Those events are:

• playing
• waiting
• seeking
• seeked
• ended
• loadedmetadata
• loadeddata
• canplay
• canplaythrough
• timeupdate
• play
• pause
• ratechange
• volumechange
• suspend
• emptied
• stalled

You currently may do something along the lines of

view.showPlayButton();
player.play();

but that breaks as soon as you at some point want to toggle your player in some other way or something else happens, like it gets stalled, so better listen to the event and update your GUI in one place, and control the playback (like start / stop the player) in another.

How to target autoplay attribute in HTML 5 Video element inside modal

You're using the variable autoplay rather than the string "autoplay", try updating your code to this:

if ($('.modal-box.opened').find('video').attr('autoplay') == true) {
  console.log('CLICK: ModalBox if Video Autoplay is true.');
}

UPDATE:

Try this instead:

if (($('.modal-box.opened').find('video').attr('autoplay') === 'autoplay')) {
  $('.modal-box.opened').find('video').get(0).play();
}

Modernizr.videoautoplay object shows true, Modernizr.videoautoplay returning undefined

I'm going to answer my own question in case anyone else runs into this problem. I found the solution on this SO post: How do I detect if the HTML5 autoplay attribute is supported?.

Since this is an "async" test you can't access the property using the syntax

Modernizr.videoautoplay

You have to use the .on() function, as shown in the above SO post:

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

How to use HTML5 video autoplay in combination with AngularJS ng-show?

I just found a workaround with the following code snippets below:

var startvideo = function(){
    angular.element('#video')[0].play();
};

var stopvideo = function(){
    angular.element('#video')[0].pause();
    angular.element('#video')[0].currentTime = 0;
};

with

<video id="video" ng-show="condition" ng-src="{{video.src}}"></video>

The first function starts the video and is called, when the condition changes to true. The second function is called if condition is set to false and pauses the video and sets it to the start.
Not sure though, if this is the best possible solution.

---

Related Topics