UI Development


What is the BrightCove Player?

Brightcove Player is a high-performance, cross-platform HTML5-first video player that loads quickly, delivers high-quality adaptive bitrate HLS video across desktop and mobile platforms, and integrates with your favorite advertising and analytics systems.

Key features

  • HTML5 First – The UI of the new Brightcove Player is written entirely in HTML5, and relies on Flash only on older browsers, enabling a consistent look and behavior across mobile and desktop devices.
  • Responsive – The default player skin is responsive by default and will automatically resize to fit changing web layouts, while maintaining the aspect ratio of the video.
  • Fast Load – With instant load and extremely fast time to first frame, viewers are immediately engaged with your content.
  • Easy customization using standard web technologies (CSS and JavaScript)
  • Cross-platform HLS – High-quality, adaptive bitrate video even on platforms that do not have native HLS capability – delivers the best quality with the least download.
  • Player Management – Easily keep track of player configuration and make changes to styles and plugins either through Video Cloud or the new Player Management API. Easily update players across your site without changing the code for each page.
  • Ad and Analytics Integration – Many plugins are available for the Brightcove Player to integrate with popular advertising and analytics systems including Google Doubleclick, Freewheel and others.


Brightcove player API methods

  • paused() – This method is used to check if the video embed is paused.
  • play()  – This method is used to play the video when the video is paused.
  • pause() – This method is used to pause the video when the video is playing.
  • muted() – This method is used to mute the video.

Brightcove player API events

  • ended

How it works
The embed HTML code should look like this:

<div id="videoContainer" style="display: block; position: relative; max-width: 100%;">
  <div style="padding-top: 56.25%;">
     <video id="video_1"
        style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"
      <script src="//players.brightcove.net/1752604059001/H16Hzc27_default/index.min.js">


The stylesheet

.video-js .vjs-control-bar {
  display: none;
.video-js {
  pointer-events: none;
  • Set the styles for the page.
  • Above lines are for hiding the player controls.

USAGE of API Methods:

After hiding the controls we can add a pause or play button to control playback of the background video.


The JavaScript code for contolling video playback:

<script type="text/javascript">
    videojs("video_1").ready(function() {
      var myPlayer = this,
          pauseButton = document.querySelector("button");

      // listen for the "ended" event and dislay play button
      myPlayer.on("ended", function() {
          pauseButton.innerHTML = "Play";

      // listen for a click event on the pause/play button
      pauseButton.addEventListener("click", function() {
        if (myPlayer.paused()) {
          pauseButton.innerHTML = "Pause";
        } else {
          pauseButton.innerHTML = "Play";
  • Line 3: Gets a reference to the player when it is ready.
  • Line 4: Gets a reference to the pause/play button.
  • Line 5: Turns off the audio for the player.
  • Lines 8-10: Sets the button name to Play when the video ends.
  • Lines 13-21: Listens for a click event on the play/pause button and either resumes playback or pauses the video based on the current playback state.


This is just a basic introduction to brightcove video player . A complete list of Brightcove player events can be found in the Player Methods/Events API reference document.


About The Author

Leave a Reply