JavaScript Methods

Player Initialization

These API calls are used to create players and provide setup information.

$bp(div, options)

Attributes Description Type Required
div The target div that Brid Player will display in String Yes
options Configuration options that will tell your player how to render itself JSON Yes 
<div id="myDiv" class="brid"></div>
<script>
$bp("myDiv", {"id":"PLAYER_ID","width":"640","height":"480","video":"VIDEO_ID"});
</script>
  • id: this is a unique ID that each player in Brid has
  • width: width of the player
  • height: height of the player
  • video: this is a unique ID that each video in Brid has

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

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

$bp(div).destroy(bool)

This call will remove a Brid Player from the page. It ensures the player stops playback, the DOM is re-set to its original state and all event listeners and timers are cleaned up. Any event listeners will need to be re-instantiated if another player is set up.

$bp(div).destroy(true);
$bp(div).destroy();

If you pass a true param to destroy, 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(div).isReady:bool

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

Playback

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

$bp(div).play()

This call will start video playback.

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(div).trigger('userInteraction');
$bp(div).play();

$bp(div).pause()

This call will pause video playback.

$bp(div).stop()

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

$bp(div).duration()

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

Playlist

These API calls are used for loading and retrieving the current playlist (of one or more items), as well as for navigating between playlist items.

$bp(div).src(source: (Object / String))

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.

Value Description Type
src Direct URL to media file String
image Direct URL to image file (starting snapshot) String
title The title of the playlist item String
description The description of the playlist item String
monetize Monetization state of playlist item Bool

$bp(div).loadPlaylist(source:(String))
This call will load a custom playlist of videos via a direct URL to a JSON playlist file.

$bp(div).currentSrc()
This call will return the URL to the video that is currently playing.

$bp(div).playlistLength()
Get the number of videos in a playlist.

$bp(div).next()
This call will playback the next video in a playlist.

$bp(div).previous()
This call will playback the previous video in a playlist.

$bp(div).playByIndex(int)
This call will playback the (int) video in a playlist. Index starts at 0.

$bp(div).currentIndex()
Get the index of the video file that is currently playing in a playlist.

Volume

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

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

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

$bp(div).muted(bool)
Use as a true/false switch to mute the player and also returns the current mute state.

Seek

These API calls are used to retrieve and update the current media playback position.

$bp(div).currentTime(float)
This call will return the current time.

$bp(div).duration():float
This call will return the duration of the video.

Quality

These API calls are used to listen to or update the video quality if multiple quality levels of a video are provided.

$bp(div).setHD(bool)
This call will set the player to playback the video in HD. (If video has an HD preset)

$bp(div).isHD():bool
This call will return true or false depending on if the currently playing video is playing an HD rendition or not.

$bp(div).setVideoSource(string)
Allowed values are: "ld", "sd", "hsd" and "hd".
This call will set the selected video rendition quality inside the player.

Advertising

These API calls provide basic manipulation of certain advertising features of the Brid player.

$bp(div).setAd(ad: Object, addAdToStart: bool, type: String)
Set a custom ad for the player to playback.

ad: Object

Value Description Type
adType 0 - pre roll, 1 - mid roll, 2 - post roll, 3 - overlay String
adTimeType s - seconds, % - percentage used for mid rolls and overlays String
adTagUrl array of URL's to ad tags that will be called Array

addAdToStart: bool

Value Description Type
true Ad will be put on first place in waterfall bool
false Ad will be placed at end of waterfall bool

type: String

Value Description Type
video Will set an ad on the video level String
player Will set an ad on the player level String

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

$bp(div).playAd(ad: (Object | String))
This call will playback an ad on command. You can pass an object the same way as explained above or you can provide the method a String which contains a 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.

Other

Other various methods that you might find useful.

$bp(div).isFullScreen:bool
This call returns true or false depending on if the player is in fullscreen or not.

$bp(div).isPlayerInView():bool
This call returns true or false depending on if the player is 50% in view or not.

$bp(div).changeSkin(Skin ID: String)
Use this call to change the players skin using the unique ID that each Brid skin has.

$bp(div).resize(width: int, height: int)
With this call you can dynamically resize the player.

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

$bp.getTitle() Use this method to get current video title

$bp.getTags() Use this method to get current video tags