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>
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.
These API calls are used to change the current playback state of the player.
$bp(div).play()
This call will start (toggle) 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 (toggle) video playback.
$bp(div).stop()
This call will stop the player and return the player to its initial state.
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.
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.
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.
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.
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 |
mobile | URL to ad tag that will be called on mobile devices | String |
desktop | URL to ad tag that will be called on desktop | String |
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 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).changeControlsBehaviour('visible' | 'autoHide')
Use this call to change how the players controls will behave. The two possible options are "visible" which will always show the players control bar and "autoHide" which will autoHide the players control bar.
$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.