JavaScript API
<html>
<body>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
var config = {
dataProvider: {
source: [
{ url: "http://bradmax.com/static/video/tears_of_steel.mp4" }
]
}
};
/** find player container in html DOM tree. */
var element = document.getElementById("player_DOM_id");
/** create player */
var player = window.bradmax.player.create(element, config);
/** get javascript api */
var jsapi = player.modules.JavascriptApi;
/** get destroy player api */
var destroyPlayer = window.bradmax.player.destroy;
/** handle player close event */
jsapi.on("close", function() {
destroyPlayer(player);
});
</script>
</body>
</html>
2. Methods.
Method name | Input type | Output type | Description |
---|
getVersion() | - | string | Get player version |
play() | - | void | Starts media playback. |
pause() | - | void | Pause media playback. |
playPause() | - | void | Toggle between play and pause. If player is in ‘pause’ state, this command will start media playback. If player is in ‘play’ state, this command will pause media playback. |
seek(timeSek) | number | void | Seek media to time position in seconds. |
setVolume(value) | number | void | Set volume, accept value in range from 0 to 1, example: 0.75. |
setMute(value) | boolean | void | Mute player when “true” passed. Unmutes with previous volume on “false” value. |
on(actionName, handler) | string, function | void | Add event listener for supported actions. Supported action names: "close" . |
add(eventClassName, handler) | string, function | void | Add event listener. |
addOnce(eventClassName, handler) | string, function | void | Add single event listener. It is only once triggered, then removed. |
remove(eventClassName, handler) | string, function | void | Remove event listener. |
toggleFullscreen() | - | void | Toggle player fullscreen mode. Notice: This function has to be called in user gesture scope (onClick/onTap) for proper work. Same limit as calling play() for mobile devices. |
repaint() | - | void | Force player to repaint UI. Solves problems, when player was hidden/shown by external JS and sometimes UI needs to be repainted. |
pictureInPicture.isAvailable() | - | bool | Returns if browser supports Picture-in-Picture mode for video. |
pictureInPicture.enter() | - | void | Triggers entering Picture-in-Picture mode for selected player. |
pictureInPicture.leave() | - | void | Leave Picture-in-Picgure mode for selected player. |
appGoingBackground() | - | void | Notify player that web app is moving to background. |
appGoingForeground() | - | void | Notify player that web app is moving to foreground from background. |
3. Events.
Event name (string) | Description |
---|
AdEvent.adConnectionError | There was network issue with ad. |
AdEvent.adCurrentTimeChange | Ad playback time was updated. |
AdEvent.adGroupCurrentTimeChange | Ad group playback time was updated. |
AdEvent.adComplete | Single ad in ad break just completed. |
AdEvent.adDisableControls | Ad break is starting and player controls was hide. |
AdEvent.adEnableControls | Ad break ended and player controls were show. |
AdEvent.adInStreamPlaying | Ad break (injected into main video stream) just started. |
AdEvent.adInStreamEnd | Ad break (injected into main video stream) just ended. |
AdEvent.adInStreamClipPlaying | Injected into main stream ad started in ad break. |
AdEvent.adInStreamClipEnd | Injected into main stream ad ended in ad break. |
AdEvent.adMediaError | Cannot play / decode video file for ad. |
AdEvent.adPaused | Ad was paused. |
AdEvent.adPlaying | Ad or ad break just started. |
AdEvent.adSkipButtonShow | Ad skip button was shown (because of ad configuration). |
AdEvent.adSkipClick | Ad skip button was clicked. |
ControlEvent.fullscreen | Full screen mode was toggled. |
ControlEvent.skinVolume | Player volume was updated. Volume level in event.data field (0.0 - muted, 1.0 - full volume). |
ControlEvent.skinPlay | User requested to play video, but it is not playing yet. |
ControlEvent.skinPause | User requested to pause video. |
ControlEvent.skinPlayPause | User requested to toggle between play / pause player state. |
DataProviderEvent.mediaMetadataData | New media metadata is available. Details in event argument. |
DataProviderEvent.adMetadataData | New ad media metadata is available. Details in event argument. |
DataProviderEvent.subtitleData | Info about subtitles tracks. |
DataProviderEvent.audioData | Info about audio tracks. |
VideoEvent.accessDenied | Access denied error occurred. |
VideoEvent.bufferingStart | Video/Audio buffering just started. |
VideoEvent.bufferingEnd | Buffering ended and playback can be continued. |
VideoEvent.complete | Media playback was completed. |
VideoEvent.connectionError | Network issue occurred - cannot connect with streaming server. |
VideoEvent.currentTimeChange | Media playback current time was changed. |
VideoEvent.durationChange | Media duration time was changed. |
VideoEvent.loadError | Network issue occurred. |
VideoEvent.mediaError | Media decode issue - broken video or not compatibile. |
VideoEvent.mediaErrorFallbackTry | Player fallback mechanism triggered - trying to resume interrupted playback. |
VideoEvent.playbackPermamentError | Error occurred during playback and player was unable to solve it. |
VideoEvent.playing | Media playback was started. |
VideoEvent.paused | Media playback was paused. |
VideoEvent.seekingStart | Seeking over video was started. |
VideoEvent.seekingEnd | Seeking over video ended and playback can be continued. |
VideoEvent.drmAuthenticationComplete | DRM authentication complete - video can be decoded with provided keys |
VideoEvent.drmAuthenticationError | Cannot decode video with provided keys or other error occurred related with authentication. |
VideoEvent.drmAuthenticationNeeded | Player detect that video is DRM protected and decryption key will be needed. |
4. Example of events handling.
<html>
<body>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
var player = window.bradmax.player.create(document.getElementById("PLAYER_DOM_ID"), {
dataProvider: {
source: [
{ url: "http://bradmax.com/static/video/tears_of_steel.mp4" }
]
}
});
function removePlayer()
{
window.bradmax.player.destroy(player);
}
var element = document.getElementById("player");
var player = window.bradmax.player.create(element, playerConfig);
var jsapi = player.modules.JavascriptApi;
jsapi.on("close", removePlayer);
jsapi.play();
jsapi.pause();
jsapi.add("VideoEvent.paused", onPause);
jsapi.add("VideoEvent.currentTimeChange", onCurrentTimeChange);
jsapi.add("VideoEvent.complete", onComplete);
jsapi.add("DataProviderEvent.mediaMetadataData", onNewMovieSet);
//movie data recived by player
function onNewMovieSet(e) {
jsapi.remove("VideoEvent.playing", onPlay);
jsapi.addOnce("VideoEvent.playing", onFirstPlay);
}
//first play event
function onFirstPlay(e) {
jsapi.add("VideoEvent.playing", onPlay);
}
//play event, does not triggered with first play
function onPlay(e) {
alert(' bradmax player "onPlay" handler ');
}
//pause event
function onPause(e) {
alert(' bradmax player "onPause" handler ');
}
//movie progress event
function onCurrentTimeChange(e) {
alert(' bradmax player current time :' + e.data.currentTime);
}
//movie complete event
function onComplete(e) {
alert(' bradmax player "onComplete" handler ');
}
</script>
</body>
</html>
5. Example of playing playlist.
<html>
<body>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
var media = {
dataProvider: [
{
title: "Big Buck Bunny",
duration: 596.0,
source: [{
url: "https://bradmax.com/static/video/tos/big_buck_bunny.m3u8",
}]
},
{
title: "Tears of steel",
duration: 734.097415,
source: [{
url: "https://bradmax.com/static/video/tears_of_steel.mp4",
}],
splashImages: [{
url: "http://bradmax.com/static/images/startsplash.jpg",
}]
}]
};
var element = document.getElementById("PLAYER_DOM_ID");
var player = window.bradmax.player.create(element, media);
</script>
</body>
</html>
NOTE: For proper playlist handling player has to be properly configured.
- Open player configurator page (open page: https://bradmax.com/client/panel/admin/player/list and create new player or select one for edition ).
- Select “Skin configuration” > "end splash".
- From available types choose “countdown” or “tiles”. For these types player will correctly handle playlist.
6. Example of player playlist with changing page on video change.
Below is example of player with playlist, where video is played on custom page. In such case only first video from playlist will be played by player on page. Next video from playlist will be played on custom player pages after user click on selected video. This playlist can be used for presenting recomended next video for user. First item from list is video, which will be played on current page.
<html>
<body>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
var media = {
dataProvider: [
{
// First video player on current page.
title: "Big Buck Bunny",
duration: 596.0,
source: [{
url: "https://bradmax.com/static/video/tos/big_buck_bunny.m3u8",
}]
},
{
// Proposed videos, which after clicking will start on new page.
title: "Tears of steel",
duration: 734.097415,
// Please define page, where player with autoplay will start playback of selected video.
mediaLandingPage: "https://bradmax.com/#player_page_url_with_selected_media",
source: [{
url: "https://bradmax.com/static/video/tears_of_steel.mp4",
}],
splashImages: [{
url: "http://bradmax.com/static/images/startsplash.jpg",
}]
},
{
// Proposed video, which after clicking will start on new page.
title: "Tears of steel 2",
duration: 734.097415,
// Please define page, where player with autoplay will start playback of selected video.
mediaLandingPage: "https://bradmax.com/#player_page_url_with_selected_media_2",
source: [{
url: "https://bradmax.com/static/video/tears_of_steel.mp4",
}],
splashImages: [{
url: "http://bradmax.com/static/images/startsplash.jpg",
}]
}]
};
var element = document.getElementById("PLAYER_DOM_ID");
var player = window.bradmax.player.create(element, media);
</script>
</body>
</html>
NOTE: For proper playlist handling player has to be properly configured.
- Open player configurator page (open page: https://bradmax.com/client/panel/admin/player/list and create new player or select one for edition ).
- Select “Skin configuration” > "end splash".
- From available types choose “countdown” or “tiles”. For these types player will correctly handle playlist.