Disabling Controls on a Brightcove Video

At last, we figured out how to disable the playback controls on a Brightcove video. It was far from easy to figure out, but it IS possible to do in a few simple steps.

Why Disable Playback Controls?

Why would you want to turn off the play/pause options on a video and disable the scrubber at the bottom?

Well in my case, we often put up sales pages online and a) don’t want folks skipping to the end of the video and b) have tightly controlled timing of things like when the Add to Cart button pops up.

With other players (JW Player, FlowPlayer, EZS3, Easy Video Player and MORE) you can easily disable the controls.

With Brightcove, you can choose to not display the controls, but as soon as the viewer mouses over the video, the controls pop up and clicking on the video pauses it. No where could we find an option to disable the playback controls!

Why Brightcove?

With all of the above mentioned players, we had continuous feedback from customers that the video didn’t play on their device, on their internet connection, on their Operating System, in their browser, and/or any combination of the above. There was constant tech support of suggesting alternate browsers or computers, and in some cases physically mailing folks a DVD.

Brightcove fully optimizes for the viewer’s device, screen size and bandwidth solving all of the above issues.

This means, instead of loading a 100MB video for someone on an edge cell connection or spotty WiFi connection, the viewer gets a lower res version from Brightcove.

Instead of telling someone to use a different device, Brightcove automatically detects what device someone is on (iPhone, Android, Mac, PC, has flash, has HTML5 support, etc…) and presents the right format that’s best for their device.

Lastly, if someone’s on a phone, it’s a waste to send them the HD version meant for desktops. If someone is on a nice desktop HD display, and you send them a low-res tiny version for a phone, it doesn’t look that great. Brightcove detects the player size and sends the right size.

Brightcove solves for all of this by allowing you to upload one video, they give you one embed code, and you’ll never hear from someone that they can’t see the video again! All your viewers will get the perfect experience.

The Code

So with those questions out of the way, let’s get down to how to embed a Brightcove video with the controls disabled.

1. In the Brightcove Video Cloud Studio navigate to the Publishing module
2. Select your player and click on Settings button or simply double-click on the player
3. In the Global tab under Web Settings, make sure Enable ActionScript/JavaScript APIs is checked
4. On the page where you’re embedding your Brightcove video, make sure to include their API library like so:

   <script src="//admin.brightcove.com/js/APIModules_all.js"></script>

5. On the same page, include the following JavaScript, or put this in a file and include it:

   <script language="JavaScript" type="text/javascript">
   function onTemplateLoaded(expID){
               var _player,
                   _exMod,
                   _modVP;        
   	   // get reference to the player itself
   	   _player = brightcove.getExperience(expID);
              // get reference to experience module
              _exMod = _player.getModule(APIModules.EXPERIENCE);
              _modVP = _player.getModule(APIModules.VIDEO_PLAYER);
   	  // hide media controls
             _exMod.getElementByID("videoPlayer").getControls().setIncludeInLayout(false);
             // in case users want to replay video listen for click event
             _exMod.getElementByID("videoPlayer").addEventListener("click", function(){
                 _modVP.play();
             }); 
    }
   </script>

6. Save the page and refresh! Your player will now perform just like you expected with two important changes. Clicking the video won’t pause it and controls never pop-up.

So what’s going on here? Brightcove has a pretty advanced API that allows you to hook into certain actions. What we’re doing here is enabled the API usage on our player (#1-3), including the library that let’s us use the API on the page with the embed code (#4), and then adding in a hook so when the video player template loads, we override and disable the playback controls (#5).

Special shout out to Darius on the Brightcove Support Team for being amazing and getting this all figured out with us!

Now you, too, can easily embed Brightcove videos without controls!