JavaScript Events

Player Initialization

Use these API events to check when Brid players are ready for API usage.

$bp('div', config, onReady)
This is the suggested method to use to check if a player is ready for API usage via a callback.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
config Object that contains all required params to render a player Object Yes
onReady Callback function Function No

$bp(div).add('ready', listener)
Add your custom listener and bind it to the 'ready' event of the player.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
ready Name of the event String Yes
listener Function which will be called when ready fires Function Yes

$bp(div).addOnce('ready', listener)
Add your custom listener only once and bind it to the 'ready' event of the player.

$bp(div).remove('ready', listener)
Remove your custom event listener from the players 'ready' event.

Check if a Brid player is ready for API usage - recommended callback example:

<script>
function ready() {
    // Insert code here to execute when player is ready for API usage
}
</script>

<div id="myDiv" class="brid" style="width:640; height:360;"></div>
<script>
    $bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID"}, ready);
</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> 

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> 

Don't forget to add a reference to the Brid player or Outstream JavaScript file somewhere before you start utilizing its API.
Player:

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

Outstream:

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

If using async embed code, you can put the reference to the JavaScript file right below the closing </body> tag of your web page. Make sure to also add the "async" attribute to the JavaScript call so that the browser knows to call it in async mode.


Playlist Widget Initialization

Use this API call to check when a Brid playlist widget is ready for API usage.

$BridWidgets.init(config, "onReady": listener)
This is the suggested method to use to check if a playlist widget is ready for API usage via a callback.

Attributes Description Type Required
config Object that contains all required params to render a playlist widget Object Yes
listener Callback function Function no

Playback

These API calls are used to check the current playback state of the player.

$bp(div).add('start', listener)
$bp(div).addOnce('start', listener)
$bp(div).remove('start', listener)
The start event is fired from the player when a video starts playing back first time.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
start Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('beforeStart', listener)
$bp(div).addOnce('beforeStart', listener)
$bp(div).remove('beforeStart', listener)
The beforeStart event is fired from the player right before an ad starts playback or before a video starts playback if no ad exists.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
beforeStart Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('play', listener)
$bp(div).addOnce('play', listener)
$bp(div).remove('play', listener)
The play event is fired from the player whenever the video is in a played state.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
play Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('pause', listener)
$bp(div).addOnce('pause', listener)
$bp(div).remove('pause', listener)
The pause event is fired from the player whenever the video is in a paused state.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
pause Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('ended', listener)
$bp(div).addOnce('ended', listener)
$bp(div).remove('ended', listener)
The ended event is fired from the player whenever the video has finished playback.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
ended Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('stopped', listener)
$bp(div).addOnce('stopped', listener)
$bp(div).remove('stopped', listener)
The stopped event is fired from the player whenever the player is forcefull stopped. This can only be done via an API call.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
stopped Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('lastSecond', listener)
$bp(div).addOnce('lastSecond', listener)
$bp(div).remove('lastSecond', listener)
The lastSecond event is fired from the player whenever a video in the player reaches its last second of playback.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
lastSecond Name of the event String Yes
listener Function which will be called when the event fires Function Yes

Playlist

These API calls are used to check the current state of a playlist.

$bp(div).add('playlistStart', listener)
$bp(div).addOnce('playlistStart', listener)
$bp(div).remove('playlistStart', listener)
The playlistStart event is fired from the player whenever a playlist starts playback.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
playlistStart Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('skipped', listener)
$bp(div).addOnce('skipped', listener)
$bp(div).remove('skipped', listener)
The skipped event is fired from the player whenever the previous or next buttons in the player are called.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
skipped Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('playlistComplete', listener)
$bp(div).addOnce('playlistComplete', listener)
$bp(div).remove('playlistComplete', listener)
The playlistComplete event is fired from the player when a playlist finishes playback.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
playlistComplete Name of the event String Yes
listener Function which will be called when the event fires Function Yes

Seek

These API calls are used to the current status of the players progress bar.

$bp(div).add('timeupdate', listener)
$bp(div).addOnce('timeupdate', listener)
$bp(div).remove('timeupdate', listener)
The timeupdate event is fired from the player whenever a time update occurs in the player. Frequency depends on browser.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
timeupdate Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('progress', listener)
$bp(div).addOnce('progress', listener)
$bp(div).remove('progress', listener)
The progress event is fired from the player whenever a player is buffering your video content. Frequency depends on browser.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
progress Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('seeked', listener)
$bp(div).addOnce('seeked', listener)
$bp(div).remove('seeked', listener)
The seeked event is fired from the player whenever a user seeks on the players timeline.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
seeked Name of the event String Yes
listener Function which will be called when the event fires Function Yes

Quality

These API calls are used to check information on when a video quality change is detected.

$bp(div).add('qualityChange', listener)
$bp(div).addOnce('qualityChange', listener)
$bp(div).remove('qualityChange', listener)
The qualitychange event is fired from the player whenever a player switches the video rendition used for playback.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
qualityChange Name of the event String Yes
listener Function which will be called when the event fires Function Yes

Advertising

These API calls provide check various states an ad can have inside the Brid player.

$bp(div).add('adStart', listener)
$bp(div).addOnce('adStart', listener)
$bp(div).remove('adStart', listener)
The adStart event is fired from the player whenever an ad begins playback.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adStart Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('vpaidStart', listener)
$bp(div).addOnce('vpaidStart', listener)
$bp(div).remove('vpaidStart', listener)
The vpaidStart event is fired from the player whenever a VPAID ad begins playback. You can use this event to differentiate between a VPAID ad and a normal VAST ad.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
vpaidStart Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('adImpression', listener)
$bp(div).addOnce('adImpression', listener)
$bp(div).remove('adImpression', listener)
The adImpression event is fired from the player whenever an ad is prepared to be played back and it's impression pixel(s) gets fired.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adImpression Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('adFirstQuartile', listener)
$bp(div).addOnce('adFirstQuartile', listener)
$bp(div).remove('adFirstQuartile', listener)
The adFirstQuartile event is fired from the player whenever 25% of an ad has been viewed.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adFirstQuartile Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('adMidpoint', listener)
$bp(div).addOnce('adMidpoint', listener)
$bp(div).remove('adMidpoint', listener)
The adMidpoint event is fired from the player whenever 50% of an ad has been viewed.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adMidpoint Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('adThirdQuartile', listener)
$bp(div).addOnce('adThirdQuartile', listener)
$bp(div).remove('adThirdQuartile', listener)
The adThirdQuartile event is fired from the player whenever 75% of an ad has been viewed.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adThirdQuartile Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('adEnd', listener)
$bp(div).addOnce('adEnd', listener)
$bp(div).remove('adEnd', listener)
The adEnd event is fired from the player whenever an ad finishes playback.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adEnd Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('adError', listener)
$bp(div).addOnce('adError', listener)
$bp(div).remove('adError', listener)
The adError event is fired from the player whenever an ad errors out for any reason.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adError Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('adPause', listener)
$bp(div).addOnce('adPause', listener)
$bp(div).remove('adPause', listener)
The adPause event is fired from the player whenever an ad is paused.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adPause Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('adResume', listener)
$bp(div).addOnce('adResume', listener)
$bp(div).remove('adResume', listener)
The adResume event is fired from the player whenever an ad has resumed playback after being paused.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
adResume Name of the event String Yes
listener Function which will be called when the event fires Function Yes

Other

Other various events that you might find useful.

$bp(div).add('loadedmetadata', listener)
$bp(div).addOnce('loadedmetadata', listener)
$bp(div).remove('loadedmetadata', listener)
The loadedmetadata event is fired from the player whenever the entire video metadata has been loaded.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
loadedmetadata Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('fullscreenchange', listener)
$bp(div).addOnce('fullscreenchange', listener)
$bp(div).remove('fullscreenchange', listener)
The fullscreenchange event is fired from the player whenever the fullscreen button has been called.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
fullscreenchange Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('playerresize', listener)
$bp(div).addOnce('playerresize', listener)
$bp(div).remove('playerresize', listener)
The playerresize event is fired whenever a player is resized.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
playerresize Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('volumechange', listener)
$bp(div).addOnce('volumechange', listener)
$bp(div).remove('volumechange', listener)
The volumechange event is fired whenever the player volume is changed.

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
volumechange Name of the event String Yes
listener Function which will be called when the event fires Function Yes

$bp(div).add('mutechange', listener)
$bp(div).addOnce('mutechange', listener)
$bp(div).remove('mutechange', listener)
The mutechange event is fired whenever the players mute status is changed.

<script>
function listener(event) {
    var isMuted = event.data.muted;
}
</script>
Attributes Description Type Required
div The target div that Brid Player will display in String Yes
mutechange Name of the event String Yes
listener Function which will be called when the event fires Function Yes