Player Initialization

Targetvideo Player can be configured differently depending of your requirements. To learn more about the player configuration please read our Player configuration reference guide.

$bp(div, options)

Initialize Targetvideo Player

Example Targetvideo player embed code:

$bp("myDiv", {
	"id":"PLAYER_ID",
	"width":"640",
	"height":"480",
	"video":"VIDEO_ID"
});

<script type="text/javascript" src="//services.brid.tv/player/build/brid.min.js"></script>
<div id="myDiv" class="brid"></div>
<script type="text/javascript">
$bp("myDiv", {
	"id":"PLAYER_ID",
	"width":"640",
	"height":"480",
	"video":"VIDEO_ID"
});
</script>

List of embed code (config) parameters:

$bp().destroy(delDiv)

This call will remove a Targetvideo Player from the page. Player playback will be stopped, the DOM will be re-set to the original state and all event listeners and timers will be cleaned up. If another player is setup on the page after calling destroy() method all event listeners will need to be re-instantiated.

Example

$bp().destroy();

$bp().isReady

This call will check if the player is ready for API manipulation. Will return true or false depending on the player status.

Example

$bp("myDiv", config, function(){
	console.log('Am I ready?', this.isReady);
});

$bp('div', config, onReady)

This is the suggested method to check if a player is ready for API usage via a callback function.

Example

$bp("myDiv", config,  function(){
	console.log("I am ready!");
});

Event Listeners

🚧

Taxonomy Update

New taxonomy for binding event listeners is added. on, once, off are equivalent to add, addOnce, remove. Old taxonomy will be supported but will not be used in documentation or examples. We strongly recommend to switch to new taxonomy.

$bp().on('ready', listener)

Add your custom listener and bind it to the 'ready' event of the player.

$bp().once('ready', listener)

Add your custom listener only once and bind it to the 'ready' event of the player.

$bp().off('ready', listener)

Remove your custom event listener from the players 'ready' event.

Here is an example of how to check if a Targetvideo player is ready for API usage - recommended callback example.

Example:

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

<div id="myDiv" class="<<player_class>>" style="width:640; height:360;"></div>
<script type="text/javascript">
	$bp("myDiv", config, ready);
</script>

<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>

<div id="myDiv" class="brid" style="width:640; height:360;"></div> 
// Here is an example of how to check if a **Brid outstream** unit
// is ready for API usage - async embed code example.
<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" src="//services.brid.tv/player/build/brid.outstream.min.js"></script>

❗️

Reference your Targetvideo player/outstream

Don't forget to add a reference to the Targetvideo player or Targetvideo Outstream JavaScript file somewhere before you start utilizing its API. Header section of the web page is recommended for synchronous embedding.

Player:
https://player.target-video.com/player/build/targetvideo.min.js

Outstream:
https://player.target-video.com/player/build/targetvideo.outstream.min.js

If using async embed code, you can put the reference to the JavaScript file right below the closing 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.

Playback

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

$bp().play()

This call will start video playback. Calling play() while media is playing does nothing.

❗️

Browser Limitations

If you use custom code to start video playback and have ads enabled, on mobile browsers and the latest Chrome and Safari, you should dispatch a user interaction before calling the play method.

$bp().pause()

This call will pause video playback.

$bp().stop()

This call will stop the player and return the player to its initial state.

These API calls are used to change the playback volume of the player.

🚧

Device limitation

Setting volume will only work on desktop browsers, not on mobile devices.

$bp().volume(volume)

This call will set a custom value for the player volume (values range from 0 to 1). Also returns current volume.

Example:

//Set volume to 15%
$bp("myDiv", configObj,  function(){
	this.volume(0.15);
});

$bp().muted(muted)

Use as a true/false switch to mute the player and also returns the current mute state.

Example:

//Set video state to muted
$bp("myDiv", configObj,  function(){
	this.muted(true);
});
//Get video muted state
$bp("myDiv", configObj,  function(){
	var muted = this.muted();
});

🚧

Ad restrictions

Keep in mind that due to the current state of VPAID ad creatives, they can have sole control over how sound is being controlled depending on browser restrictions that are set. Due to this, our player does have custom mute handling built-in to force mute behaviors in certain conditions but due to the above, under certain circumstances (latency, lag, client machine etc.) a VPAID ad can force sound for a split-second until our custom mute handling kicks in. This is only true for autoplay-start muted implementations.

$bp().currentTime(int)

This call will return the current time.

Example:

$bp().currentTime();
//10.413225

$bp().currentTime(25);
//Will seek the player to the 25th second of the video.

$bp().duration()

This call will return the duration of the video.

Example:

$bp().duration();
//184.5

$bp().currentChapter(chapter)

Returns an object that has the current running chapter number, name and start and end time of the current chapter. This method will return null if a video has no video chapters.

Example:

$bp().currentChapter();

//Will seek the player to the start of the third chapter
$bp(div).currentChapter(2)

$bp().setHD(toggle)

This call will set the player to playback the video in HD (If video has an HD preset).

Example:

$bp().setHD(true);
//Switch rendition to HD resolution
$bp().setHD(false);
//Switch rendition back to SD resolution

$bp().isHD()

This call will return true or false depending on if the currently playing video is playing an HD rendition or not.

Example:

$bp().isHD();
//true

$bp().setVideoSource(rendition)

This call will set the selected video rendition quality inside the player.

Rendition source available values:

Example:

$bp().setVideoSource("hd");

📘

Tip

For more details about video sources and available renditions you can find in our Zendesk section.

$bp().on('qualityChange', listener)

$bp().once('qualityChange', listener)

$bp().off('qualityChange', listener)

The qualitychange event is fired from the player whenever a player switches the video rendition used for playback.

$bp().on('start', listener)

$bp().once('start', listener)

$bp().off('start', listener)

The start event is fired from the player when a video starts playing back first time.

Example:

$bp().on('start', function(){
	console.log('Video started!');
});

$bp().on('beforeStart', listener)

$bp().once('beforeStart', listener)

$bp().off('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.

Example:

$bp().on('beforeStart', function(){
	console.log('Before video started!');
});

$bp().on('play', listener)

$bp().once('play', listener)

$bp().off('play', listener)

The play event is fired from the player whenever the video is in a played state.

Example:

$bp().on('play', function(){
	console.log('Play video!');
});

$bp().on('pause', listener)

$bp().once('pause', listener)

$bp().off('pause', listener)

The pause event is fired from the player whenever the video is in a paused state.

Example:

$bp().on('pause', function(){
	console.log('Pause video!');
});

$bp().on('ended', listener)

$bp().once('ended', listener)

$bp().off('ended', listener)

The ended event is fired from the player whenever the video has finished playback.

Example:

$bp().on('ended', function(){
	console.log('Video ended!');
});

$bp().on('stopped', listener)

$bp().once('stopped', listener)

$bp().off('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.

Example:

$bp().on('stopped', function(){
	console.log('Video stopped!');
});

$bp().on('lastSecond', listener)

$bp().once('lastSecond', listener)

$bp().off('lastSecond', listener)

The lastSecond event is fired from the player whenever a video in the player reaches its last second of playback.

Example:

$bp().on('lastSecond', function(){
	console.log('Last second of the video!');
});

$bp().on('playbackerror', listener)

$bp().once('playbackerror', listener)

$bp().off('playbackerror', listener)

This event is fired from the player when a video errors out for any reason.

Example:

$bp().on('playbackerror', function(){
	console.log('Video playback error!');
});

$bp().on('clickedThrough', listener)

$bp().once('clickedThrough', listener)

$bp().off('clickedThrough', listener)

This event is fired from the player whenever the user clicks on a video.

Example:

$bp().on('clickedThrough', function(){
	console.log('Video was clicked.');
});

$bp().on('livestreamstopped', listener)

$bp().once('livestreamstopped', listener)

$bp().off('livestreamstopped', listener)

This event is fired from the player whenever a live stream is not running for any reason.

Example:

$bp().on('livestreamstopped', function(){
	console.log('A livestream has stopped working.');
});

$bp().on('destroyBefore', listener)

$bp().once('destroyBefore', listener)

$bp().off('destroyBefore', listener)

This event is triggered by the player just before the destroy method is called, which will remove a Brid Player from the page. This functionality is particularly handy for outstream players, as the player will not be displayed unless a valid ad is returned.

Example:

var impression = false;
this.add("adImpression", function() {
    impression = true;
});
this.add("destroyBefore", function() {
    if (!impression) {
        // outstream closed no impression fired
    }
});

Playlist

$bp().src(source)

This call will set a custom video source via a String or Object.
Here's a small subset of accepted values that you can use to set a custom playlist.

source object details:

🚧

Warrning

src needs to be wrapped into a ready callback.

Example:

$bp("myDiv", config,  function(){
	$bp().src({
		"src" : "https://cdn.brid.tv/live/partners/264/sd/685723.mp4",
		"title" : "Test video title",
		"monetize" : false
	});
});

$bp().src("https://cdn.brid.tv/live/partners/264/sd/685723.mp4");

$bp().loadPlaylist(source)

This call will load a custom playlist of videos via a direct URL to a JSON playlist file.

Example:

$bp().loadPlaylist("https://services.brid.tv/services/get/video/1/633599.json");

$bp(div).currentSrc()

This call will return the URL to the video that is currently playing.

Example:

$bp(div).currentSrc();
//https://cdn.brid.tv/live/partners/264/sd/685723.mp4

$bp().playlistLength

Get the number of videos in a playlist.

Example:

$bp().playlistLength;
//4

$bp().next()

This call will playback the next video in a playlist.

$bp().previous()

This call will playback the previous video in a playlist.

$bp().playByIndex(index)

This call will playback the n-th video in a playlist. Index starts at 0.

$bp().currentIndex

Get the index of the video file that is currently playing in a playlist.

Example:

$bp().currentIndex;
//0 - first item in playlist

$bp().on('playlistStart', listener)

$bp().once('playlistStart', listener)

$bp().off('playlistStart', listener)

The playlistStart event is fired from the player whenever a playlist starts playback.

$bp().on('skipped', listener)

$bp().once('skipped', listener)

$bp().off('skipped', listener)

The skipped event is fired from the player whenever the previous or next buttons in the player are called or the player goes automatically to the next video in your playlist.

$bp().on('playlistComplete', listener)

$bp().once('playlistComplete', listener)

$bp().off('playlistComplete', listener)

The playlistComplete event is fired from the player when a playlist finishes playback.

Seek

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

$bp().on('timeupdate', listener)

$bp().once('timeupdate', listener)

$bp().off('timeupdate', listener)

The timeupdate event is fired from the player whenever a time update occurs in the player. Frequency depends on browser.

$bp().on('progress', listener)

$bp().once('progress', listener)

$bp().off('progress', listener)

The progress event is fired from the player whenever a player is buffering your video content. Frequency depends on browser.

$bp().on('seeked', listener)

$bp().once('seeked', listener)

$bp().off('seeked', listener)

The seeked event is fired from the player whenever a user seeks on the players timeline.

Advertising

These API calls provide check various states an ad can have inside the Targetvideo player.
The adSkip and adComplete events in this category provide two additional params that give you information about the ad pod and ad waterfall position.

Example:

$bp().on('adComplete', function(e){

  console.log(e.type, e.data);
  //adComplete {wp: 1, pod: 0, pods: 2}

});

Sample response (e.data):

{wp: 1, pod: 0, pods: 2}

$bp().on('requestAd', listener)

$bp().once('requestAd', listener)

$bp().off('requestAd', listener)

The requestAd event is fired from the player whenever an ad request is made.

$bp(div).on('AdsManagerLoadedEvent', listener)

$bp(div).once('AdsManagerLoadedEvent', listener)

$bp(div).off('AdsManagerLoadedEvent', listener)

The AdsManagerLoadedEvent event is fired from the player whenever Google IMA SDK fires their AdsManagerLoadedEvent event.

$bp().on('bidWon', listener)

$bp().once('bidWon', listener)

$bp().off('bidWon', listener)

The bidWon event is fired from the player whenever Prebid returns a winning bid.

$bp().on('adStart', listener)

$bp().once('adStart', listener)

$bp().off('adStart', listener)

The adStart event is fired from the player whenever an ad begins playback.

$bp().on('vpaidStart', listener)

$bp().once('vpaidStart', listener)

$bp().off('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.

$bp().on('adImpression', listener)

$bp().once('adImpression', listener)

$bp().off('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.

$bp().on('adFirstQuartile', listener)

$bp().once('adFirstQuartile', listener)

$bp().off('adFirstQuartile', listener)

The adFirstQuartile event is fired from the player whenever 25% of an ad has been viewed.

$bp().on('adMidpoint', listener)

$bp().once('adMidpoint', listener)

$bp().off('adMidpoint', listener)

The adMidpoint event is fired from the player whenever 50% of an ad has been viewed.

$bp().on('adThirdQuartile', listener)

$bp().once('adThirdQuartile', listener)

$bp().off('adThirdQuartile', listener)

The adThirdQuartile event is fired from the player whenever 75% of an ad has been viewed.

$bp().on('adEnd', listener)

$bp().once('adEnd', listener)

$bp().off('adEnd', listener)

The adEnd event is fired from the player whenever an ad call process is done from start to finish. This does not necessarily mean that an ad will playback. This event fires once a complete ad cycle is completed no matter if an ad displays or not.

$bp().on('adComplete', listener)

$bp().once('adComplete', listener)

$bp().off('adComplete', listener)

The adComplete event is fired from the player whenever an ad finishes playback.

$bp().on('adSkip', listener)

$bp().once('adSkip', listener)

$bp().off('adSkip', listener)

The adSkip event is fired from the player whenever a user clicks on the "SKIP AD" button inside the player for ads that are set to be skippable.

$bp().on('adError', listener)

$bp().once('adError', listener)

$bp().off('adError', listener)

The adError event is fired from the player whenever an ad errors out for any reason.

📘

Tip

See below code example on how to get additional information about the ad error like the ad error code and small description of the error.

!!! See below code example on how to get additional information about the ad error like the ad error code and small description of the error.

Example:

$bp().add('adError', function(e) {
	console.log(e.data.code, e.data.message);
});

$bp().on('adPause', listener)

$bp().once('adPause', listener)

$bp().off('adPause', listener)

The adPause event is fired from the player whenever an ad is paused.

$bp().on('adResume', listener)

$bp().once('adResume', listener)

$bp().off('adResume', listener)

The adResume event is fired from the player whenever an ad has resumed playback after being paused.

$bp().on('adClicked', listener)

$bp().once('adClicked', listener)

$bp().off('adClicked', listener)

The adClicked event is fired from the player whenever a user clicks on an ad.

❗️

Limitation

The following advertising events ('adStarted', 'adError' and 'adImpression') have additional data associated with them with which you can get the response of the XML template itself. In case of redirects, the last template in the array will be returned as a result. **This callback is only possible if you use our in-house Targetvideo ad parser. Google IMA SDK is not supported.

Example:

$bp().on(['adStarted','adError','adImpression'], function(e) {
	console.log('ad event', e.type, 'xml', $bp().values.lastVASTXML);
});

$bp().setAd(ad, prepend, level)

Set a custom ad for the player to playback.

Ad object:

📘

Tip

All ads that get set on a video level will override any setting set up on the player level.

$bp().setAd({
	"adType":"0", //pre-roll
	"adTimeType": "s",
	"adTagUrl" : ["https://adtag-url-1","https://adtag-url-2"]
});

$bp().playAd(ad)

This call will playback an ad on command.
You can pass an Ad object the same way as explained above or a direct URL to a valid VAST ad tag.

$bp().pushAds()

This method will call preroll ads defined for the player used whenever it is called during the video content playback.

$bp(div).getAdInProgress()

This call returns true or false depending on if an ad or video content is playing.

Other

Other various events and API calls that you might find useful.

$bp().toggleFullScreen():bool

Use this method to set the player to go into fullscreen mode.

$bp().isFullScreen

This call returns true or false depending on if the player is in fullscreen or not.

$bp().isPlayerInView()

This call returns true or false depending on if the player is 50% in view or not.

$bp().changeSkin(id)

Use this call to change the players skin using the unique ID that each Targetvideo skin has.

$bp().resize(width, height)

With this call you can dynamically resize the player.

$bp().resize(16, 9);

$bp().GoogleAnalytics.fireCustom("Targetvideo-Video", "custom_event_action")

Use this method to fire a custom Google Analytics event from the player with a custom event action.

🚧

Warrning

Accessing GoogleAnaltyics object is available only when wrapped in ready callback.

Example:

$bp("myDiv", config,  function(){
	$bp().GoogleAnalytics.fireCustom("Company-Video", "custom_event_action")  
});

$bp().getTitle()

Use this method to get current video title.

$bp().getTags()

Use this method to get current video tags.

$bp().on('loadedmetadata', listener)

$bp().once('loadedmetadata', listener)

$bp().off('loadedmetadata', listener)

The loadedmetadata event is fired from the player whenever the entire video metadata has been loaded.

$bp().on('fullscreenchange', listener)

$bp().once('fullscreenchange', listener)

$bp().off('fullscreenchange', listener)

The fullscreenchange event is fired from the player whenever the fullscreen button has been called.

$bp().on('playerresize', listener)

$bp().once('playerresize', listener)

$bp().off('playerresize', listener)

The playerresize event is fired whenever a player is resized.

$bp().on('volumechange', listener)

$bp().once('volumechange', listener)

$bp().off('volumechange', listener)

The volumechange event is fired whenever the player volume is changed.

$bp().on('mutechange', listener)

$bp().once('mutechange', listener)

$bp().off('mutechange', listener)

The mutechange event is fired whenever the players mute status is changed.

Example:

$bp().on('mutechange', function(e){
	console.log(event.data.muted);
  //true
});

$bp().on('stickyChange', listener)

$bp().once('stickyChange', listener)

$bp().off('stickyChange', listener)

The stickyChange event is fired from the player whenever the a player goes to sticky or get's un-stickied.

Example:

$bp().on('stickyChange', function(e){
	console.log('stickyChange event', event.data);
});

$bp().on('stickyChange', function(e){
	console.log('stickyChange event', event.data);
  if (!event.data.sticky && event.data.interaction) {
		console.log('closed on X button click!');
	}
});

Event.data explained: