Brid

The Brid Developer Hub

Welcome to the Brid developer hub. You'll find comprehensive guides and documentation to help you start working with Brid as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

JavaScript API Reference

Players API methods described

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

Property

Description

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:

Parameter

Description

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

Attribute

Description

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.

Property

Description

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.

Attribute

Description

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>
<script type="text/javascript" src="//services.brid.tv/player/build/brid.outstream.min.js"></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>

❗️

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.

$bp().duration()

This method will return the current video objects duration in seconds.

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

volume
float

Sets volume of the video element - valid range is between 0 and 1.

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

muted
bool

Sets or gets the current volume.

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

This call will return the current time.

Return

Description

time
float

Return current time of the playback

Example:

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

$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

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.

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

Attribure

Description

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.

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

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

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.

Parameter

Description

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.

Parameter

Description

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.

Parameter

Description

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.

Parameter

Description

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.

Parameter

Description

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.

Parameter

Description

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.

Parameter

Description

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.

Parameter

Description

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!');
});

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

source
string|object

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

source object details:

Property

Description

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.

Property

Description

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.

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

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.

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

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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}

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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 clicks on the "SKIP AD" button inside the player for ads that are set to be skippable.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

event
string

(Required) Name of the event - adResume

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.

Property

Description

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:

Property

Description

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.

Property

Description

ad
int

(Required) JSON object as described above or direct URL to a valid VAST ad tag.

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

Property

Description

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.

Property

Description

width
int

(Required) Width of the player

height
int

(Required) Height of the player

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

$bp().googleAnalytics.fire("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.fire("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

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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.

Property

Description

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

Description

sticky
bool

Will be true or false depending on the player position

interaction
bool

Will return true if there was a user interaction

Updated about a month ago


JavaScript API Reference


Players API methods described

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.