BCA - BrightCove video player Adapter

Adapter for BrightCove video player written in JavaScript.

Features:

• Write less code. BCA provides automatic configuration and reasonable defaults for BrightCove video player (but all parameters are still configurable);
• Supports both HTTP and HTTPS with automatic protocol detection;
• Automatically includes BrightCove Smart Player API when you need it;
• Eliminates some boilerplate code which you typically have to write to access BrightCove Smart Player API;
• Enables dynamic creation of video player on the page using JavaScript;
• Compatible with RequireJS.

Browser compatibility: tested in IE7+, Chrome, Firefox, Safari and Opera.

Dependencies: jQuery, BrightCove JavaScript API.

Installation

Download bca.js from this repository, or install with Bower:

bower install bca

or, if you're using npm:

npm install bca

Usage

<div id="BCA">
  <!-- Video player will be rendered here -->
</div>

<!-- Load dependencies -->
<script src="//sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Load BCA -->
<script src="/bca.js"></script>

<!-- Initialize video player -->
<script>
  new BCA({
    'width': 640,
    'height': 404,
    'playerID': '<your-player-id>',
    'playerKey': '<your-player-key>',
    '@videoPlayer': '<video-id>'
  });
</script>

Usage with RequireJS

Define BCA dependencies in your RequireJS config. Note that BrightcoveExperiences requires a shim:

require = {
  paths: {
    'brightcove-experiences': '//sadmin.brightcove.com/js/BrightcoveExperiences',
    jquery: '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min'
  },

  shim: {
    'brightcove-experiences': {
      exports: 'brightcove'
    }
  }
};

Use BCA on your page as following:

<div id="bca">
  <!-- Video player will be rendered here -->
</div>

<!-- Initialize video player -->
<script>
  require(['BCA'], function(BCA) {
    new BCA({
      'width': 640,
      'height': 404,
      'playerID': '<your-player-id>',
      'playerKey': '<your-player-key>',
      '@videoPlayer': '<video-id>'
    });
  });
</script>

Parameters

Instances of video player on the page are created as following:

new BCA({<parameters>});

// or

new BCA({<parameters>}, {<options>});

Parameters object passed as a first argument to BCA is combined with default parameters and converted to tags of video player root tag. For example, when you create BCA instance as

new BCA({
  'width': 640,
  'height': 404,
  'playerID': '<your-player-id>',
  'playerKey': '<your-player-key>',
  '@videoPlayer': '<video-id>'
});

it produces the following HTML output:

<object id="myExperience" class="BrightcoveExperience">
  <param name="width" value="640">
  <param name="height" value="404">
  <param name="playerID" value="<your-player-id>">
  <param name="playerKey" value="<your-player-key>">
  <param name="@videoPlayer" value="<video-id>">
  ... default params ...
</object>

Default parameters

BCA provides the following parameter defaults:

{
  bgcolor: '#FFFFFF',
  isVid: true,
  isUI: true,
  dynamicStreaming: true,
  wmode: 'transparent',
  linkBaseURL: <URL of current page>
}

Any of above could be overwritten, just pass parameter which you want to overwrite to BCA. For example, if you'd like to change bgcolor to red:

new BCA({
  'width': 640,
  'height': 404,
  'playerID': '<your-player-id>',
  'playerKey': '<your-player-key>',
  '@videoPlayer': '<video-id>',
  'bgcolor': '#FF0000'
});

Automatically configured parameters

The following parameters are configured automatically. You should not overwrite them:

• secureConnections, secureHTMLConnections - configured automatically depending on the current page protocol (HTTP or HTTPS);
• includeAPI - enabled automatically if you provided onReady callback to connect to BrightCove API (see below) and disabled otherwise for faster page loading.

Options

Second optional parameter for BCA constructor is options object. Possible options and their defaults:

{
  id: 'myExperience',
  // 'class' is a reserved word, not working in IE without quotes
  'class': 'BrightcoveExperience',
  targetElement: '#BCA',
  onReady: undefined
}

id and 'class' set corresponding attribute values for video player root tag. Overwrite them if you need to change defaults.

targetElement specifies a CSS selector for parent html element where video player should be rendered. For example, if you'd like video player to be rendered inside an element with id="my-video-player", use the following code on your page:

<div id="my-video-player">
  <!-- Video player will be rendered here -->
</div>

<!-- Load dependencies -->
<script src="//sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Load BCA -->
<script src="/bca.js"></script>

<!-- Initialize video player -->
<script>
  new BCA({
    'width': 640,
    'height': 404,
    'playerID': '<your-player-id>',
    'playerKey': '<your-player-key>',
    '@videoPlayer': '<video-id>'
  }, {
    targetElement: '#my-video-player'
  });
</script>

Connect to BrightCove Smart Player API

To use Smart Player API, provide onReady callback in BCA constructor options, like this:

var playerReadyCallback = function(bca) {
    console.log(bca.brightcove);
    console.log(bca.player);
    console.log(bca.videoPlayer);
    console.log(bca.currentVideo);
};

new BCA({
  'width': 640,
  'height': 404,
  'playerID': '<your-player-id>',
  'playerKey': '<your-player-key>',
  '@videoPlayer': '<video-id>'
}, {
  onReady: playerReadyCallback
});

Callback is called with BCA object instance as a parameter. There are 4 properties already initialized for you there:

• brightcove - shortcut to root brightcove object of BrightCove API;
• player - instance of BrightcoveExperience;
• videoPlayer - instance of brightcove.api.modules.VideoPlayerModule;
• currentVideo - video object currently loaded into video player.

Quick examples of what can be done:

console.log(bca.currentVideo.length);  // print length of current video, in milliseconds

bca.videoPlayer.play();  // play current video

bca.videoPlayer.seek(position);  // seek to specified position

Please refer to BrightCove API for detailed docs.

Report bugs

Report issues to the project's Issues Tracking on Github.