Brightcove Player Sample: Autoplay with Unmute Button

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

In this topic, you will learn how to autostart a video on all platforms and devices. If on iOS or Safari, the video will start muted, and a button will be displayed that when clicked will unmute the video.

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.

View the source code.

Using the CodePen

Here are some tips to effectively use the above CodePen:

  • Toggle the actual display of the player by clicking the Result button.
  • Click the HTML/CSS/JS buttons to display ONE of the code types.
  • Later in this document the logic, flow and styling used in the application will be discussed in the Player/HTML configuration, Application flow and Application styling sections. The best way to follow along with the information in those sections is to:
    1. Click the EDIT ON CODEPEN button in the CodePen and have the code available in one browser/browser tab.
    2. In CodePen, adjust what code you want displayed. You can change the width of different code sections within CodePen.
    3. View the Player/HTML configuration, Application flow and/or Application styling sections in another browser/browser tab. You will now be able to follow the code explanations and at the same time view the code.

Development sequence

Here is the recommended development sequence:

  1. Use the In-Page embed player implementation to test the functionality of your player, plugin and CSS (if CSS is needed)
  2. Put the plugin's JavaScript and CSS into separate files for local testing
  3. Deploy the plugin code and CSS to your server once you have worked out any errors
  4. Use Studio to add the plugin and CSS to your player
  5. Replace the In-Page embed player implementation if you determine that the iframe implementation is a better fit (detailed in next section)

For details about these steps, review the Quick Start: Plugin Development guide.

iframe or In-Page embed

When developing enhancements for the Brightcove player you will need to decide if the code is a best fit for the iframe or In-Page embed implementation. The best practice recommendation is to build a plugin for use with an iframe implementation. The advantages of using the iframe player are:

  • No collisions with existing JavaScript and/or CSS
  • Automatically responsive
  • The iframe eases use in social media apps (or whenever the video will need to "travel" into other apps)

Although integrating the In-Page embed player can be more complex, there are times when you will plan your code around that implementation. To generalize, this approach is best when the containing page needs to communicate to the player. Specifically, here are some examples:

  • Code in the containing page needs to listen for and act on player events
  • The player uses styles from the containing page
  • The iframe will cause app logic to fail, like a redirect from the containing page

Even if your final implementation does not use the iframe code, you can still use the In-Page embed code with a plugin for your JavaScript and a separate file for your CSS. This encapsulates your logic so that you can easily use it in multiple players.

API/Plugin resources used

API Methods API Events
muted() loadedmetadata
play()  
on()  
volume()  

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
     class="video-js"
     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.