Brightcove Player Sample: Horizontal Volume Control

Development sequence

Here is the recommended development sequence:

Use the In-Page embed player implementation to test the functionality of your player, plugin and CSS (if CSS is needed)
Put the plugin's JavaScript and CSS into separate files for local testing
Deploy the plugin code and CSS to your server once you have worked out any errors
Use Studio to add the plugin and CSS to your player
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 Step-by-Step: 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"
      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.

Note: the control bar uses a flex container to layout its elements. By default, flex items are laid out as they appear in the HTML source code. The CSS order property allows you to control the position of flex elements. For older browsers, you need to include additional prefixed order properties.

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.

Note: By default, the flex items in the control bar are laid out as they appear in the HTML source code. For older browsers, like IE9, the order in which you add these elements is important. Here, we add the mute button last, so that it appears to the left of the volume control.

Note: the MuteToggle and VolumeControl clases can be found in the Brightcove Player API Index.
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.

Create a new file for your CSS styles. In this case, name it horizontal-volume.css.
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"> 
```
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);
});

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>
```
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:

In the new Video Cloud Studio, open the Players module and locate the player.
Click the link for the player to open the player properties.
Locate the Plugins section and click Edit.
For the JavaScript URL, enter the URL which specifies the location of where you saved your plugin's JavaScript.
For the CSS URL, enter the URL which specifies the location of where you saved your plugin's CSS.
For the Name, enter horizontalVolume.
This plugin has no options, so you can leave the plugin options section blank.
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.

In the Media module, select a video and publish it with this player.Return to the Players module.

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 allow='encrypted-media'></iframe>

</body>
</html>

Browse the HTML page. You should see the plugin functioning correctly.