HTML5 Player JavaScript API method details

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

Property	Description	Required
div `(string)`	The target div that Targetvideo Player will display in	required
config `(string)`	Configuration object that will tell your player how to render itself	required

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:

Parameter	Description	Required
id `(string)`	Unique ID that each player in Targetvideo platform has	required
width `(string)`	Width of the player	required
height `(string)`	Height of the player	required
video `(string)`	Unique video ID in Targetvideo platform	required

$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();

Attribute	Description	Required
delDiv `(bool)`	If you pass a true param to destroy method, the player will not remove the div HTML element in which it is being rendered. If left empty, the div HTML element in which it renders will be removed from the page.	optional

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

Property	Description	Required
div `(string)`	The target div that Targetvideo Player will display in	required
config `(string)`	Object that contains all required params to render a player	required
onReady `(function)`	Callback function	required

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.

Attribute	Description	Required
ready `(string)`	Name of the event	required
listener `(function)`	Function which will be called when ready event is dispatched from the player	required

$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" 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 <head> 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 </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.

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.

Attribute	Description	Required
volume `(float)`	Sets volume of the video element - valid range is between 0 and 1.	optional

Return	Description
volume `(float)`	Returns the volume value.

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.

Attribute	Description	Required
muted `(bool)`	Sets or gets the current volume.	optional

Return	Description
muted `(bool)`	Gets 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.

Return	Description
time `(float)`	Return current time of the playback or if an integer is passed will seek the player to that amount of seconds.

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.

Return	Description
duration `(float)`	Returns the duration of the media element

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.

Attribute	Description	Required
chapter `(int)`	Passing an integer to the method will seek the player to the start of the chapter. Chapter numbers start at 0 for the first chapter.	optional

Return	Description
chapterInfo `(object)`	Current chapter object

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

Attribute	Description	Required
toggle `(bool)`	(Require) Switch between HD and SD rendition of the media element.	optional

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.

Return	Description
status `(bool)`	True/False if current media is playing a HD rendition.

Example:

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

$bp().setVideoSource(rendition)

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

Property	Description	Required
rendition `(string)`	Change the rendition of the media element. Limitations can apply depending of the Account Owners plan. See the below available values.	optional

Rendition source available values:

Video Source Abbervation	Source Description
ld	Low definition video
sd	Standard definition video
hsd	High standard definition video
fhd	Full high definition video
hd	High definition video

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.

Property	Description	Required
event `(string)`	Name of the event - qualityChange.	required
listener `(function)`	Function which will be called when the event fires	required

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

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
event `(string)`	Name of the event	required
listener `(function)`	Function which will be called when the event fires	required

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.

Parameter	Description	Required
source `(string\|object)`	Provide source URL or object defined as in below format.	required

source object details:

Property	Description	Required
src `(string)`	Direct URL to media file	optional
title `(string)`	The title of the playlist item	optional
description `(string)`	The description of the playlist item	optional
monetize `(bool)`	Monetization state of playlist item	optional

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

Property	Description	Required
source `(string)`	Direct URL to media file	required

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.

Return	Description
URL `(string)`	URL to the media element.

Example:

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

$bp().playlistLength

Get the number of videos in a playlist.

Return	Description
items `(int)`	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.

Property	Description	Required
index `(int)`	Index of the playlist. Index starts at 0.	required

$bp().currentIndex

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

Return	Description
index `(int)`	Current index in the 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.

Property	Description	Required
event `(string)`	Name of the event	required
callback `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event	required
callback `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event	required
callback `(function)`	Function which will be called when the event fires	required

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.

Property	Description	Required
event `(string)`	Name of the event	required
callback `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event	required
callback `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event	required
callback `(function)`	Function which will be called when the event fires	required

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}

Property	Description	Required
wp `(integer)`	Waterfall position	optional
pod `(integer)`	Current pod position of ad	optional
pods `(integer)`	Number of pods set on the player level	optional

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

Property	Description	Required
event `(string)`	Name of the event - requestAd	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - AdsManagerLoadedEvent	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - bidWon	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adStart	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - vpaidStart	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - vpaidStart	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adFirstQuartile	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adMidpoint	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adThirdQuartile	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adThirdQuartile	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adComplete	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adSkip	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adError	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adPause	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - adResume	required
listener `(function)`	Function which will be called when the event fires	required

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

Property		Required
event `(string)`	Name of the event - adClicked	required
listener `(function)`	Function which will be called when the event fires	required

❗️ 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.

Property	Description	Required
ad `(JSON object)`	Define ad object to be added to the waterfall stack. Ad object is described below.	required
prepend `(bool)`	Prepend ad object to the waterfall. `true` will add it to the beginning of the waterfall, `false` will add it to the end of the waterfall stack. By default ad will be appended to the stack.	optional
level `(string)`	Ad object will be added on player or video level. Possible values: `video` or `player`. `player` is a default value.	optional

Ad object:

Property	Description	Required
adType `(int)`	0 - pre roll, 1 - mid roll, 2 - post roll, 3 - overlay	required
adTimeType `(string)`	`s` - seconds `%` - percentage used for mid rolls and overlays	required
mobile `(array)`	Array of URL's to ad tags that will be called on both desktop/mobile devices if desktop property is not set. If desktop property is present then ad tags from mobile property will be called on mobile devices only.	required
desktop `(array)`	Array of URL's to ad tags that will be called on desktop devices only.	optional

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

Property	Description	Required
ad `(int)`	JSON object as described above or direct URL to a valid VAST ad tag.	required

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

Return	Description
adInProgress `(bool)`	`true` if ad is in progress.

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.

Return	Description
isFullScreen `(bool)`	`true` if video element is in full screen mode.

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

Property	Description	Required
id `(int)`	ID of the skin from Targetvideo platform. For more details about the valid values checkout the Targetvideo Platform API.	required

$bp().resize(width, height)

With this call you can dynamically resize the player.

Property	Description	Required
width `(int)`	Width of the player	required
height `(int)`	Height of the player	required

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

Property	Description	Required
event `(string)`	Name of the event - loadedmetadata	required
listener `(function)`	Function which will be called when the event fires	required

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

Property	Description	Required
event `(string)`	Name of the event - fullscreenchange	required
listener `(function)`	Function which will be called when the event fires	required

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

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

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

The playerresize event is fired whenever a player is resized.

Property	Description	Required
event `(string)`	Name of the event - playerresize	required
listener `(function)`	Function which will be called when the event fires	required

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

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

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

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

Property	Description	Required
event `(string)`	Name of the event - volumechange	required
listener `(function)`	Function which will be called when the event fires	required

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

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

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

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

Property	Description	Required
event `(string)`	Name of the event - volumechange	required
listener `(function)`	Function which will be called when the event fires	required

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.

Property	Description	Required
event `(string)`	Name of the event - stickyChange	required
listener `(function)`	Function which will be called when the event fires	required

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:

Event.data	Description	Required
sticky `(bool)`	Will be true or false depending on the player position	optional
interaction `(bool)`	Will return true if there was a user interaction	optional

Code examples