Autoplay Considerations

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Playback
Type
Support Doc

In this topic, you will learn about issues surrounding autoplaying a video on page load.

Overview

Using Brightcove Player to autoplay a video when a page loads is not a simple issue. This stems from browser vendors responding to user wishes to NOT have videos autoplay. This document will detail the current state of autoplaying videos in various browsers and Brightcove Player configurations that affect autoplay.

Browser/platform autoplay policies

The following is a brief summary of autoplay policies for a few browsers and iOS:

  • Safari: In September 2017 with the release of Safari 11, Apple began preventing autoplay of videos with sound.
  • Chrome: In April 2018 with the release of Chrome 66, Google began preventing autoplay of unmuted video. Be aware, there are special circumstances where Chrome may autoplay an unmuted video. See Google's Autoplay Policy Changes document for full details.
  • Firefox: Mozilla has taken the position of not having a firm autoplay policy for the time being. That may change in the future. That said, Firefox today does allow users to disable autoplay with a few configuration changes.
  • IE11/Edge: At the time of this writing, Microsoft’s browsers have no specific/known autoplay policy, autoplay just works in IE11 and Edge.
  • iOS: In June 2016 with the release of iOS 10, Apple began preventing autoplay of videos with sound. Details can be obtained from Webkit.org's New <video> Policies for iOS document.
  • Note that if you are requesting a preroll ad and set autoplay to true, the IMA3 v3 plugin tries to autoplay the content/ad with sound, if that fails, it tries to autoplay muted, and only if that fails does it fall back to click-to-play.

From the list above, you can see you should never assume autoplay will work. As an alternative to adding autoplay or calling player.autoplay(true), you can call player.play() and check the promise to see if they can autoplay or not.

Configure autoplay

When you want Brightcove Player to try to autoplay a video you need to set that in the player's configuration. You can do this either with Studio or the Player Management API.

In Studio, edit the desired player then in the Playback section set the value:

Set autoplay in Studio

Of course, setting this value only asks Brightcove Player to try and autoplay the video. Browser/OS restrictions may prevent the video from starting on page load.

Programmatic autoplay using the play() method

For whatever reason, you may not be able to configure the player to use autoplay as discussed in the previous section of this document. In this case you can use the play() method to start the video on page load. Be aware, this approach is still governed by all the browser/platform rules mentioned earlier.

Remember that you must wait for the media to be loaded into the player before using the play() method. Waiting for the loadedmetadata event will do the trick:

<script type="text/javascript">
  var myPlayer = videojs.getPlayer('myPlayerId');
  myPlayer.on('loadedmetadata',function() {
    myPlayer.play();
  });
</script>

Using the play() method does NOT override browser/OS restrictions on autoplay.

For a sample which will always autoplay a video, but displays a large unmute button over the player if needed, see the Brightcove Player Sample: Autoplay with Unmute Button for iOS/Safari/Chrome document.

Programmatic autoplay detection

You can programmatically detect if autoplay succeeded by listening for a JavaScript Promise returned by the player's play() method. Brightcove Player's play() method returns a Promise object that indicates whether autoplay succeeded. Following are two console screenshots showing the Promise object when autoplay succeeded (Promise resolved) or autoplay failed (Promise rejected).

promise resolved
Autoplay succeeded
promise rejected
Autoplay failed

As per standard JavaScript handling of a Promise, here is a code snippet using the play() 's Promise.

var myPlayer = videojs.getPlayer('myPlayerID');
myPlayer.on('loadedmetadata',function() {
  var promise = myPlayer.play();
  if (promise !== undefined) {
    promise.then(function() {
      // Autoplay started!
    }).catch(function(error) {
      // Autoplay was prevented.
    });
  }
});

You can use this snippet to implement your use case rules.

Known issues