Basic

Always make sure that the players JavaScript file is loaded before you start using its API if using non-async embed code.

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>

Check if a Brid player or Ad Unit is ready for API usage

Recommended callback example:

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<script>
function ready() {
    // Insert code to execute when player is ready for API usage
}
</script>

<div id="myDiv" class="brid"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID"}, ready);
</script>

You can also use the isReady boolean to track if the player is ready for API usage:

<script>
    var playerReady = $bp('ID_OF_PLAYER_DIV').isReady;
</script>

Check if a Brid player is ready for API usage - async embed code example:

<div id="myDiv" class="brid" style="width:640; height:360;"></div>
<script type="text/javascript">
  var _bp = _bp||[]; _bp.push({ 
  "div": "myDiv", 
  "obj": {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID"},
  "onReady": function() {
                // Insert code here to execute when player is ready for API usage
              });
          }
  }); 
</script> 
<script type="text/javascript" async src="//services.brid.tv/player/build/brid.min.js"></script>

Check if a Brid outstream unit is ready for API usage - async embed code example:

<div id="myDiv" class="brid" style="width:640; height:360;"></div> 
<script type="text/javascript">
      var _bos = _bos||[];
      _bos.push({
          "div": "myDiv",
          "obj": {"id":"UNIT_ID","width":"640","height":"360"},
          "onReady": function() {
                // Insert code here to execute when player is ready for API usage
              });
          }
      });
</script> 
<script type="text/javascript" async src="//services.brid.tv/player/build/brid.outstream.min.js"></script>

Adding a start event listener

In the code below we add a start event listener to a Brid player.

<script>
    $bp('ID_OF_PLAYER_DIV').add(‘start’, foo);
    function foo(){
        //add function content
    }
</script>

Removing an event listener

In the code below we will remove a start event listener from a Brid player.

<script>
    $bp('ID_OF_PLAYER_DIV').remove(‘start’, foo);
</script>

Set a video to play in HD

In the code below we will instruct the player through its JS API to change the quality of the video playing to an HD rendition.

<script>
    $bp('ID_OF_PLAYER_DIV').setHD(true);
</script>

Seek anywhere on the players timeline

The code snippet below shows how to use the API to seek anywhere on the players timeline. The code below will seek to the 90 second mark of a video.

<script>
    $bp('ID_OF_PLAYER_DIV').seek(90);
</script>

Setting a specific volume in the player

Use the following code snippet to setup a custom value for the players volume via the API. Note that the code below will set the volume in the player to 60%.

<script>
    $bp('ID_OF_PLAYER_DIV').setVolume(0.6);
</script>

Play the n-th item in a playlist

Use the following code snippet to instruct the player to start playback of the 3rd video in a playlist.

<script>
    $bp('ID_OF_PLAYER_DIV').playByIndex(3);
</script>

Pause player playback with the API

Use the code snippet below to programmatically pause the player with a custom function.

<script>
    $bp('ID_OF_PLAYER_DIV').pause();
</script>

Remove player and all dependencies

Use the following code snippet to entirely remove the player.

<script>
    $bp('ID_OF_PLAYER_DIV').destroy();
</script>

Override the autoplay parameter of the player via the embed code

Use the following code snippet to override the autoplay setting on the player level. The snippet below will override what setting is set on the player level and make sure your player is set to be click-to-play.

<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID", "autoplay": false});
</script>

Set a player to shuffle your playlist

Use the following code snippet to shuffle an embedded playlist in a Brid player. This option will load a random video from your playlist on each player load.

<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","playlist":"PLAYLIST_ID", "shuffle": true});
</script>

Set a frequency cap for ad display per user

Use the following code snippet to set a custom ad frequency setting on a per user level in a Brid player. The setting expects an Integer which holds a value in hours to how long a user will need to wait until it gets another ad served. In the example below, the value is set to 5 which means that a viewer will get an ad served only once every 5 hours.

<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID", "freqCap": 5});
</script>

Set a Brid outstream unit to bust out of a friendly iframe

To enable any Brid outstream unit to succesfully bust out of a friendly iframe, make sure that the following global parameter is set on your web page.

<script>
    document.BridIframeBurst = true;
</script>

Make sure that this code snippet is called and located before the Brid outstream unit intializes.


Force the players config to load from CDN instead from local storage

For testing purposes you may want to force the players configuration file to load directly from our CDN every time instead from the users HTML5 local storage. If this is the case, you can add the following parameter to your embed code to utilize this.

<script>
    Brid.forceConfigLoad = true;
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID"});
</script>

Do keep in mind that player config files are cached on our CDN and can have a propagation time of up to 20 minutes.


Show the players debug information in console

For testing purposes you may want to check what debug information the player provides. Use the following snippet below to enable the players debug information in your browsers console. You can get handy information from this debug specially if you are looking to debug ad display information.

<script>
    Brid.debug = true;
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID"});
</script>

Autoplay only one player if multiple autoplay players are located on a same page

This option if present on your web page, will prevent all your autoplay players to autoplay at once and will only autoplayer the player that comes first in view.

<script>
    document.blockSimultaneousPlay = true;
</script>

Make sure that this code snippet is called and located before all Brid players intialize on the web page. Make sure that your player is set to autoplay when xx% in view so this option can work correctly.


Force display of thumbnails on mobile devices when using Brid's playlist widgets

By default, a Brid playlist widget will display as a standard player on mobile for better usability. If you want to maintain the look and feel of the playlist widget as it displays on desktop with thumbnails below the player, you can force this setting through the widgets embed code by adding "forceThumbs":true to the embed code like this:

<script>
BridWidgets.init({"id":myDiv,"playerId":"PLAYER_ID","partnerId":"SITE_ID","playlistId":"PLAYLIST_ID","height":"400","mobileHeight":"400","color":"ffffff","playlistType":"0","autoplay":0,"shuffle":0, "forceThumbs":true});
</script>

Automatically start playing back a video with a specific index in the player embedded with a playlist

To easily start playback of specific video in a playlist, you can do this by passing the index of the video to the player via embed code like this:

<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","playlist":"PLAYLIST_ID","startPlaylistIndex":"4"});
</script>

The above code will instruct the player to load the 5th video (index starts from 0) in your playlist on player load.


Maintain a sticky position for the player

The player supports a specific parameter with which you can force the player to stay in it's sticky position and not return to where the player is located if it is in view. To use this option see the demo code below.

<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"360","video":"VIDEO_ID","staySticky":true});
</script>