JavaScript API Reference

HTML5 Player JavaScript API method details

Player Initialization

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

PropertyDescription
div
string
(Required) The target div that Brid Player will display in
config
string
(Required) Configuration object that will tell your player how to render itself

Example Brid 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:

ParameterDescription
id
string
(Required) Unique ID that each player in Brid platform has
width
string
(Required) Width of the player
height
string
(Required) Height of the player
video
string
(Required) Unique video ID in Brid platform

$bp().destroy(delDiv)

This call will remove a Brid 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();
AttributeDescription
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.

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

PropertyDescription
div
string
(Required) The target div that Brid Player will display in
config
string
(Required) Object that contains all required params to render a player
onReady
function
(Required) 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.

AttributeDescription
ready
string
(Required) Name of the event
listener
function
(Required) Function which will be called when ready event is dispatched from 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 Brid 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 Brid player/outstream

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

Player:
https://services.brid.tv/player/build/brid.min.js

Outstream:
https://services.brid.tv/player/build/brid.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.

AttributeDescription
volume
float
Sets volume of the video element - valid range is between 0 and 1.
ReturnDescription
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.

AttributeDescription
muted
bool
Sets or gets the current volume.
ReturnDescription
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.

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

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

AttributeDescription
chapter
int
(Optional) 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.
ReturnDescription
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).

AttribureDescription
toggle
bool
(Require) Switch between HD and SD rendition of the media element.

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.

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

PropertyDescription
rendition
string
Change the rendition of the media element. Limitations can apply depending of the Account Owners plan. See the below available values.

Rendition source available values:

Video Source AbbervationSource Description
ldLow definition video
sdStandard definition video
hsdHigh standard definition video
fhdFull high definition video
hdHigh 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.

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

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

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
event
string
(Required) Name of the event
listener
function
(Required) Function which will be called when the event fires

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.

ParameterDescription
source
string|object
(Required) Provide source URL or object defined as in below format.

source object details:

PropertyDescription
src
string
Direct URL to media file
title
string
The title of the playlist item
description
string
The description of the playlist item
monetize
bool
Monetization state of playlist item

๐Ÿšง

Warrning

src need to wrapped into ready 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.

PropertyDescription
source
string
(Required) Direct URL to media 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.

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

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

PropertyDescription
index
int
(Required) Index of the playlist. Index starts at 0.

$bp().currentIndex

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

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

PropertyDescription
event
string
(Required) Name of the event
callback
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event
callback
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event
callback
function
(Required) Function which will be called when the event fires

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.

PropertyDescription
event
string
(Required) Name of the event
callback
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event
callback
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event
callback
function
(Required) Function which will be called when the event fires

Advertising

These API calls provide check various states an ad can have inside the Brid 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}
PropertyDescription
wp
integer
Waterfall position
pod
integer
Current pod position of ad
pods
integer
Number of pods set on the player level

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

PropertyDescription
event
string
(Required) Name of the event - requestAd
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - AdsManagerLoadedEvent
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - bidWon
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adStart
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - vpaidStart
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - vpaidStart
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adFirstQuartile
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adMidpoint
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adThirdQuartile
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adThirdQuartile
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adComplete
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adSkip
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adError
listener
function
(Required) Function which will be called when the event fires

๐Ÿ“˜

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.

PropertyDescription
event
string
(Required) Name of the event - adPause
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - adResume
listener
function
(Required) Function which will be called when the event fires

$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
event
string
(Required) Name of the event - adClicked
listener
function
(Required) Function which will be called when the event fires

โ—๏ธ

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

PropertyDescription
ad
JSON object
(Required) Define ad object to be added to the waterfall stack. Ad object is described below.
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.
level
string
Ad object will be added on player or video level. Possible values: video or player. player is a default value.

Ad object:

PropertyDescription
adType
int
(Required) 0 - pre roll, 1 - mid roll, 2 - post roll, 3 - overlay
adTimeType
string
(Required) s - seconds
% - percentage used for mid rolls and overlays
mobile
array
(Required) 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.
desktop
array
Array of URL's to ad tags that will be called on desktop devices only.

๐Ÿ“˜

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.

PropertyDescription
ad
int
(Required) JSON object as described above or 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.

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

ReturnDescription
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 Brid skin has.

PropertyDescription
id
int
(Required) ID of the skin from Brid platform. For more details about the valid values checkout the Brid Platform API.

$bp().resize(width, height)

With this call you can dynamically resize the player.

PropertyDescription
width
int
(Required) Width of the player
height
int
(Required) Height of the player
$bp().resize(16, 9);

$bp().GoogleAnalytics.fireCustom("Brid-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.

PropertyDescription
event
string
(Required) Name of the event - loadedmetadata
listener
function
(Required) Function which will be called when the event fires

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

PropertyDescription
event
string
(Required) Name of the event - fullscreenchange
listener
function
(Required) Function which will be called when the event fires

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

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

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

The playerresize event is fired whenever a player is resized.

PropertyDescription
event
string
(Required) Name of the event - playerresize
listener
function
(Required) Function which will be called when the event fires

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

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

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

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

PropertyDescription
event
string
(Required) Name of the event - volumechange
listener
function
(Required) Function which will be called when the event fires

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

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

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

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

PropertyDescription
event
string
(Required) Name of the event - volumechange
listener
function
(Required) Function which will be called when the event fires

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.

PropertyDescription
event
string
(Required) Name of the event - stickyChange
listener
function
(Required) Function which will be called when the event fires

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.dataDescription
sticky
bool
Will be true or false depending on the player position
interaction
bool
Will return true if there was a user interaction