bca

    0.2.0 • Public • Published

    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:

    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.

    Keywords

    Install

    npm i bca

    DownloadsWeekly Downloads

    1

    Version

    0.2.0

    License

    none

    Last publish

    Collaborators

    • stebunovd