Embedding, player element & player object


Embed code

There are multiple ways to place media on your page. The easiest way is using the script embed code from the OVP.

<script type="text/javascript" src="//demo.bbvms.com/p/default/c/2734714.js"  async="true"></script>

What this code does is retrieve the media metadata and check if our Player API is already on the page and load it if necessary.

If you rather keep things isolated, you can use the equally easy iframe embed code.

onload="this.src += '#!referrer='+encodeURIComponent(location.href)+'&realReferrer='+encodeURIComponent(document.referrer)"  
src="//demo.bbvms.com/p/default/c/2734714.html?inheritDimensions=true" width="720" height="400"  
frameborder="0" webkitallowfullscreen mozallowFullscreen oallowFullscreen msallowFullscreen allowfullscreen >  

This has some caveats though, notably reduced 360video- and fullscreen capabilities.


You can also directly embed our Player API from

http://[your publication name].bbvms.com/launchpad/

Once the Player API is loaded it will register itself in the javascript variable “bluebillywig” on the document window and allow you to embed your media with pure javascript.


  1. <script src="http://demo.bbvms.com/launchpad/"></script>
  2. <div id="myPlayerDiv"></div>
  3. <script>
  4. // Embed the player in the element "myPlayerDiv". Other playout settings (like width, height, autoPlay) can also be overruled by including them in the object passed as a second parameter:
  5. var myPlayer = new bluebillywig.Player( "http://demo.bbvms.com/p/default/c/2337181.json", {
  6.         target : document.getElementById("myPlayerDiv"),
  7.         autoPlay : "false"
  8. });
  9. // call the play method on the newly created player:
  10. myPlayer.play();
  11. </script>

Note that getters, such as getPlayoutData(), will not work before the player has triggered its 'ready' event. Other methods, such as play() and on() will, but are queued until the player is ready. Hence, you can -- and should -- use the on() method to bind to the 'ready' event and go from there.

Player element

In the Document Object Model (DOM), the player is the element with class 'bb_wrapper'. If there are multiple players, they can be identified by id, following this naming convention:


{playout_label} and {content_id} are variables, with the {playout_label} being the sanitized playout name (lowercase and with all non-alphanumeric characters replaced by an underscore '_') and the content_id being the clip id or the cliplist id.

The "wrapper" DOM element mentioned above is the main container of the player. There are "no user-serviceable parts inside". Everything inside the wrapper is subject to change in subsequent releases.

An example to select the first player element (using jQuery):

  1. var player = $('.bb_wrapper')[0];

Note: The [0] following the selector to target the element and not the jQuery object.

The following example selects a specific player by ID (without jQuery):

  1. var contentid = 2119581; // Replace this with a valid Clip ID from your VMS
  2. var playoutname = 'default'; // Replace this with a playout name from the VMS
  3. var playerid = 'bb-wr-' + playoutname.replace(/[^\w-]/g, '_') + '-' + contentid;
  4. // results in "bb-wr-default-2119581"
  6. var player = document.getElementById(playerid);

Note the regular expression (/[^\w-]/g) sanitizing the playout name.

Retrieving the player object

The player object is useful for calling API calls and listening to events. When inserting a player via the Blue Billywig API as described above, the player object will be returned (stored in myPlayer in the example).

When embedding a player, a callback function can be passed with the embedcode. This callback function will be called when the player API is loaded and it will pass the player object as parameter.

  1. <script>
  2. var myPlayer;
  3. function myCallback(player){
  4.         myPlayer = player;
  5.         myPlayer.on('canplay', canPlay);
  6. }
  8. function canPlay(){
  9.         myPlayer.play();
  10. }
  11. </script>
  12. <script src=”http://bb.bbvms.com/p/default/c/123456.js?callback=myCallback”></script>

It's also possible to get the player object by calling window.bluebillywig.getPlayerInstance()

  1. var player = window.bluebillywig.getPlayerInstance();