Brightcove Player Sample: Autoplay with Unmute Button

Player example

The following video will behave differently depending on the browser/platform on which you run the video. If the video will autoplay with audio, it does so. If not, you will see the video begin to play, but an unmute button will appear. If you click that button you will hear the audio for the video. Generally, when using iOS, Safari or Chrome, a video will NOT autoplay if the video is not muted. This sample shows a way to autoplay the video and presents an obvious button for unmuting.

If you are using an IMA3 pre-roll, you will want to see the Using a pre-roll ad section in this document. This section details the minor changes you will need to apply to the code shown in the following CodePen to make the functionality work with an IMA pre-roll ad.

See the Pen Autoplay with Unmute Button by Brightcove Learning Services (@rcrooks1969) on CodePen.

Source code

View the complete solution on GitHub.

API/Plugin resources used

Player/HTML configuration

This section details any special configuration needed during player creation. In addition, other HTML elements that must be added to the page, beyond the in-page embed player implementation code, are described.

Player configuration

In addition to the standard inclusion of an id in the video tag, the playsinline attribute is added for iOS functionality:

<div id="playerContainer" class="outer">
   <video-js id="myPlayerID"
     data-video-id="5755775186001"
     data-account="1752604059001"
     data-player="default"
     data-embed="default"
     data-application-id=""
     controls=""
     playsinline></video-js>
</div>

Other HTML

No other HTML elements, other than those mentioned in the previous section, are added to the page.

Application flow

The basic logic behind this application is:

• Use the play() method to attempt to play the video. The call to the method is assigned to a variable, which will hold the value returned by a JavaScript promise.
• If the promise is resolved (the video is playing), unmute the player and set the volume level.
• If the promise is rejected (the video is NOT playing), perform the following:
  • Mute the player, and start the video playing (which it will do now since the player is muted).
  • Dynamically create an HTML button element, that acts as the unmute button.
  • Add a click event listener on the button.
  • Configure the button's text, style, etc.
  • Place the button over the player.

Try to play the video

Find the code which is labeled:

// ### Wait for loadedmetadata then try to play video ###

As per standard procedure, you wait for the loadedmetadata event before using the play() method. The promise returned from the method call is stored in the promise variable. If the video is playing, you can unmute the player and set the volume.

When autoplay prevented, mute player and play video

Find the code which is labeled:

// ### If autoplay prevented: mute the video, play video and display unmute button ###

Here the catch logic for the promise lets you act when the video did not start in the player. The player is programmatically muted, so the video will play. The play() method is called again, which will start the video. Following this code, the button is dynamically created and configured.

Add a click event listener to the button

Find the code which is labeled:

// ### Add button's event listener ###

Using JavaScript's addEventListener(), the event handler for a click is dynamically created. In the event handler the player is unmuted, the volume level set, and lastly the button removed from the DOM.

Configure the button

Find the code which is labeled:

// ###  Configure the button ###

In this code section the button's label is set, the look of the button is configured, and a class is added for a CSS reference that positions the button.

Add the button to the container

Find the code which is labeled:

// ### Add the button to the container ###

The single line of code places the button in the div that constrains the player.

Using a pre-roll ad

Since the ad is playing when the unmute button appears, you need to unmute the ad player rather than the content player. To do this you would use the following for the click handler:

button.addEventListener("click", function() {
  myPlayer.ima3.adPlayer.muted(false);
  myPlayer.ima3.adPlayer.volume(volumeLevel);
  //myPlayer.muted(false);
  //myPlayer.volume(volumeLevel);
  playerContainer.removeChild(button);
}

The two lines of code for the content player volume control are commented out and left in only for comparison's sake.

You do not need to make the same change for the non-iOS/Safari/Chrome code since the volume is altered BEFORE the ad is loaded (on the loadstart event), and those changes pass through to the ad player when it loads.

See this CodePen for a working example.

Application styling

The three CSS selectors perform the following:

• Sets the video height and width to 100% to fill the container in which it is placed.
• Creates a class selector that is used with the div that surrounds the player. The values used correspond to the size of the player.
• Creates another class selector that positions the unmute button in the center of the div that surrounds the player.

Plugin code

Normally when converting the JavaScript into a Brightcove Player plugin nominal changes are needed. One required change is to replace the standard use of the ready() method with the code that defines a plugin.

Here is the very commonly used start to JavaScript code that will work with the player:

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  ...
});

You will change the first line to use the standard syntax to start a Brightcove Player plugin:

videojs.registerPlugin('pluginName', function(options) {
  var myPlayer = this;
  ...
});

As mentioned earlier, you can see the plugin's JavaScript code in this document's corresponding GitHub repo: unmute-button.js.

Using the plugin with a player

Once you have the plugin's CSS and JavaScript files stored in an Internet accessible location, you can use the plugin with a player. In Studio's PLAYERS module you can choose a player, then in the PLUGINS section add the URLs to the CSS and JavaScript files, and also add the Name and Options, if options are needed.