Brightcove Player Sample: Horizontal Volume Control

Product(s)
Video Cloud
Brightcove Player
Role(s)
Player Developer
Topic(s)
Audio
Code Samples
Styling

In this topic, you will learn how to change the volume and mute buttons on the Brightcove Player control bar. In this example, you will hide the vertical volume control and replace it with a horizontal control.

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.

Select implementation

In this example, you will test with the In-Page embed code and then add the CSS and JavaScript files to the player. Then, you will deploy the plugin. With the horizontal volume plugin added to the player, you can use the iframe implementation.

API resources used

The following sections detail resources used from various APIs.

Brightcove player API methods

  • control_bar.addChild()
  • control_bar.removeChild()

The player

In the player below, notice the horizontal volume control bar replaces the default vertical control bar.

How it works

The following sections explain the player, JavaScript and CSS code used in the example.

Create the player

To create a player and assign a video to it, follow these steps:

  • In the Players module, create a new player or use an existing one.
  • In the Media module, select a video and publish it with this player.Assign video content to the player and publish it.
  • Copy the In-Page embed code and paste it into a new HTML file.

The player code

Your In-Page embed code should look similar to this:

    <video-js id="video_1"
      width="640px" height="360px"
      data-video-id="4172255216001"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      class="video-js" controls></video-js>
    <script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>

The stylesheet

This example uses CSS styles for the Brightcove player.

  • Lines 9-22: Set the order of elements in the control bar. This example places the mute control and the volume control after the progress bar, but before the fullscreen button.

    For more details about setting the control bar icon order, see the Customize Player Appearance document.

  • Lines 24-26: Remove the default shadow around the volume control to better match the progress bar.
  • Lines 27-34: Set the height and background color for the volume control.
  • Lines 36-38: Add padding to the right of the volume control to make sure it does not overlap with the fullscreen button.
    <style type="text/css">
        /* Order of controls in bar, should flow in before fullscreen button.  */
        .vjs-mute-control {
          order: 7;
          -webkit-box-ordinal-group: 7;
          -moz-box-ordinal-group: 7;
          -webkit-order: 7;
          -ms-flex-order: 7;
        }
        .vjs-volume-control {
          order: 8;
          -webkit-box-ordinal-group: 8;
          -moz-box-ordinal-group: 8;
          -webkit-order: 8;
          -ms-flex-order: 8;
        }
        /* Better match progress bar */
        .video-js.video-js .vjs-volume-bar:before {
          box-shadow:none;
        }
        .video-js.video-js .vjs-volume-bar,
        .video-js.video-js .vjs-volume-bar:before,
        .video-js.video-js .vjs-volume-level {
          height: 4px;
        }
        .video-js.video-js .vjs-volume-handle {
          background-color: initial;
        }
        /* Additional padding to reduce inadvertently covering the fullscreen button */
        .vjs-volume-control {
          padding-right: 5px;
        }
    </style>

The JavaScript code

Add the following JavaScript to your page code.

  • Line 57: Gets a reference to the player when it is ready.
  • Line 59: Gets a reference to the player's control bar.
  • Line 60: Gets a reference to the volume menu button.
  • Lines 61-62: Add the mute button and volume control elements to the control bar.

  • Line 63: Removes the default volume menu button from the control bar.
    <script id="pageScript" type="text/javascript">
        var myPlayer;

        videojs.getPlayer('video_1').ready(function(){
            myPlayer = this;

            var control_bar = myPlayer.controlBar;
            var vmb = control_bar.volumeMenuButton;
            control_bar.addChild('VolumeControl');
            control_bar.addChild('MuteToggle');
            control_bar.removeChild(vmb);
        });
    </script>

Use a plugin

It is a best practice to use a plugin so that you can easily add this functionality to multiple players.

Create the CSS file

Move the CSS styles into a file and place it in an Internet accessible URL.

  1. Create a new file for your CSS styles. In this case, name it horizontal-volume.css.
  2. In the <head> section of your HTML file, add the following link to include your newly created CSS file.
    <link href="horizontal-volume.css" rel="stylesheet"> 
  3. Browse the HTML page. You should see the horizontal volume control, except now your styles have been removed from the HTML page.

Create the JavaScript file

Move the plugin's JavaScript code into a file and place it in an Internet accessible URL.

  • Create a new file for your plugin JavaScript code. In this case, name it horizontal-volume.js.
  • Cut and paste the JavaScript code from your main HTML file into this new file.
  • Lines 77,85: Wrap your JavaScript code using the videojs.registerPlugin() function. The first argument, horizontalVolume, is the plugin name.
  • Line 78: Gets a reference to your player.
  • The rest is your JavaScript code which was reviewed in a previous section.
/**
 * Horizontal Volume
 */
videojs.registerPlugin('horizontalVolume', function() {
    var myPlayer = this,
    control_bar = myPlayer.controlBar,
    vmb = control_bar.volumeMenuButton;

    control_bar.addChild('VolumeControl');
    control_bar.addChild('MuteToggle');
    control_bar.removeChild(vmb);
});
  1. In the HTML file, add the following code just below the existing <script> tags. This code includes the JavaScript file and then calls the method defined in that JavaScript.
    <script type="text/javascript" src="horizontal-volume.js"></script>
    <script>videojs.getPlayer('video_1').horizontalVolume();</script>
  2. Browse the HTML page. You should see the horizontal volume control, except now your JavaScript code has been removed from the HTML page.

Deploy plugin and CSS

To deploy the overlay button Plugin using the Players module, follow these steps:

  1. In the new Video Cloud Studio, open the Players module and locate the player.
  2. Click the link for the player to open the player properties.
  3. Locate the Plugins section and click Edit.
  4. For the JavaScript URL, enter the URL which specifies the location of where you saved your plugin's JavaScript.
    Studio plugin add JS
  5. For the CSS URL, enter the URL which specifies the location of where you saved your plugin's CSS.
    Studio plugin add CSS
  6. For the Name, enter horizontalVolume.
  7. This plugin has no options, so you can leave the plugin options section blank.
    Studio plugin add Name, Options
  8. Click Save and then Publish the player.

Use iframe

It is a best practice to use the iframe player implementation. If it is possible for this example, replace the In-Page embed implementation with the iframe implementation.

  1. In the Media module, select a video and publish it with this player.Return to the Players module.
  2. Copy the iframe embed code and paste it into a new HTML file. Your code should look similar to this:

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>Brightcove Player: Horizontal Volume - iframe</title>
    </head>
    
    <body>
        <iframe style='width: 640px;height: 360px;' src='//players.brightcove.net/1752604059001/b42edc12-2ac9-48a9-92bc-fbdb5ca9aed7_default/index.html?videoId=4172255216001' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
    
    </body>
    </html>
  3. Browse the HTML page. You should see the plugin functioning correctly.