<html>
<body>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
var config = {
dataProvider: {
source: [
{ url: "https://example.com/video.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 version >= v2.14.285 */
if (player.hasOwnProperty('api'))
jsapi = player.api;
/** player version < v2.14.285 */
if (jsapi === null)
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>
| AdEvent 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 name (string) | Description |
|---|---|
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 name (string) | Description |
|---|---|
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. |
DataProviderEvent.videoQualityData | Info about available video/audio qualities. |
| VideoEvent name (string) | Type | Description |
|---|---|---|
VideoEvent.accessDenied | string | Access denied error occurred. |
VideoEvent.bufferingStart | string | Video/Audio buffering just started. |
VideoEvent.bufferingEnd | string | Buffering ended and playback can be continued. |
VideoEvent.complete | string | Media playback was completed. |
VideoEvent.connectionError | string | Network issue occurred - cannot connect with streaming server. |
VideoEvent.currentTimeChange | string | Media playback current time was changed. |
VideoEvent.durationChange | string | Media duration time was changed. |
VideoEvent.loadError | string | Network issue occurred. |
VideoEvent.mediaError | string | Media decode issue - broken video or not compatible. |
VideoEvent.mediaErrorFallbackTry | string | Player fallback mechanism triggered - trying to resume interrupted playback. |
VideoEvent.playbackPermamentError | string | Error occurred during playback and player was unable to solve it. |
VideoEvent.playing | string | Media playback was started. |
VideoEvent.paused | string | Media playback was paused. |
VideoEvent.seekingStart | string | Seeking over video was started. |
VideoEvent.seekingEnd | string | Seeking over video ended and playback can be continued. |
VideoEvent.drmAuthenticationComplete | string | DRM authentication complete - video can be decoded with provided keys |
VideoEvent.drmAuthenticationError | string | Cannot decode video with provided keys or other error occurred related with authentication. |
VideoEvent.drmAuthenticationNeeded | string | Player detect that video is DRM protected and decryption key will be needed. |
<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: "https://example.com/video.mp4" }
]
}
});
function removePlayer() {
window.bradmax.player.destroy(player);
}
var element = document.getElementById("player");
var player = window.bradmax.player.create(element, playerConfig);
var jsapi = player.api;
/**
* NOTE: if player version is lower than v2.14.285, api can be accessed as shown in next line:
* 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 received 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>
<html>
<body>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
var config = {
dataProvider: [
{
title: "First video",
duration: 596.0,
source: [{ url: "https://example.com/video.m3u8" }]
},
{
title: "Second video",
duration: 734.097415,
source: [{ url: "https://example.com/video.mp4" }],
splashImages: [{ url: "https://example.com/startsplash.jpg" }]
}]
};
var element = document.getElementById("PLAYER_DOM_ID");
var player = window.bradmax.player.create(element, config);
</script>
</body>
</html>
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 recommended 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: "First video",
duration: 596.0,
source: [{ url: "https://example.com/video.m3u8" }]
},
// Proposed videos, which after clicking will start on new page.
{
title: "Second video",
duration: 734.097415,
// Please define page, where player with autoplay will start playback of selected video.
mediaLandingPage: "https://example.com/#player_page_url_with_selected_media",
source: [{ url: "https://example.com/video.mp4" }],
splashImages: [{ url: "https://example.com/startsplash.jpg" }]
},
// Proposed video, which after clicking will start on new page.
{
title: "Third video",
duration: 734.097415,
// Please define page, where player with autoplay will start playback of selected video.
mediaLandingPage: "https://example.com/#player_page_url_with_selected_media_2",
source: [{ url: "https://example.com/video.mp4" }],
splashImages: [{ url: "https://example.com/startsplash.jpg" }]
}]
};
var element = document.getElementById("PLAYER_DOM_ID");
var player = window.bradmax.player.create(element, media);
</script>
</body>
</html>
Below is example how to obtain list of video/audio qualities from player and how to select one using JavaScript API. Video & audio qualities are “merged” into single list even when internally they are available independently - for example for MPEG-DASH it is possible to select audio & video qualities independently. For user ease video/audio qualities are merged into single list and audio is automatically “preselected” for each video quality.
<html>
<body>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
var media = {
dataProvider: [{
title: "First video",
duration: 596.0,
source: [{ url: "https://example.com/video.m3u8" }]
}]
};
var element = document.getElementById("PLAYER_DOM_ID");
var player = window.bradmax.player.create(element, media);
var jsapi = player.modules.JavascriptApi;
function onVideoQualitiesInfo(event) {
// Display info about video qualites
// Quality level is in event.data[].data in video quality record.
//{
// "label": "176p", // user label for quality description
// "data": "0", // key used for quality identification. Use it for calling jsapi.requestVideoQualityChange().
// "height": 176, // Video resolution height (it is scaled to whole player area).
// "width": 426, // Video resolution width (it is scaled to whole player area).
// "bitrateKbps": 1280, // Bitrate in Kbps.
// "active": false // Indicates if such level is currently active/in-use or not.
//}
console.log(event.data);
// Select lowest quality (lowest "0" highest some "N"). Mode auto quality selection got value "-1".
// Notice: Arguments are numbers passed as string.
jsapi.requestVideoQualityChange("0");
}
// Attach listener on DataProviderEvent.videoQualityData event. After that qualities list is known
// and selection is available.
jsapi.add("DataProviderEvent.videoQualityData", onVideoQualitiesInfo);
</script>
</body>
</html>
Note 1: Best experience and support is for custom build for Smart TV devices. Please contact us for providing such build.
Note 2: There is no support for “Back” button for simplification. Pressing back TV remotes means that user want to close player and back to content selection view. Stream quality, subtitles selection, audio selection will automatically close when user loose focus on this element (for eg. by focusing on “play” button or on progress bar). For most advanced cases custom player skin integrated with app is recommended (best control for navigation).
<html>
<body>
<div style="width: 890px; height: 500px; background: black;" id="PLAYER_DOM_ID"></div>
<script type="text/javascript">
var config = {
dataProvider: [{
title: "Test video for Smart TV",
duration: 596.0,
source: [{ url: "https://example.com/video.m3u8" }]
}]
};
var element = document.getElementById("PLAYER_DOM_ID");
var player = window.bradmax.player.create(element, config);
var api = player.api;
// Notice: `nav` object for TV remote navigation is available only for Smart TV devices.
// For development try to "simulate such device" by setting in your browser custom User Agent like below:
// Mozilla/5.0 (Web0S; Linux/SmartTV) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.5359.211 Safari/537.36
// Set it in: Chrome > Developer Tools > More tools [Network Conditions] > User Agent
if (api.nav) {
// Support method called when user is trying to navigate off player UI. For example
// when is focused on left most item and user again click left, then callback below
// will be called with dir=='left'. This gives application additonal context so for example
// additional options can be open (eg. list of episodes, EPG for Live TV etc.).
function onNavTryToExit(dir) { console.debug(`EXIT to ${dir}`); };
// Start navigation over skin - focus border will appear on focused UI element.
// By default - player will focus on "play" button.
api.nav.start({onExit: onNavTryToExit});
// Navigation can be initialised without any parameter: `api.nav.start();`
// Call "ok" on focused element. In this case start playback will occur.
// In final solution perform it only on user action, like in keydown listener below.
api.nav.ok();
// Attach TV Remote key bindings to api.nav handler.
document.addEventListener("keydown", function (e) {
var keyCode= e.keyCode;
if((keyCode == 13) || (keyCode == 32)){
console.log('Key pressed: KEY_ENTER');
api.nav.ok();
} else if(keyCode == 415){
console.log('Key pressed: KEY_PLAY');
api.play();
} else if(keyCode == 19 || keyCode == 413){
console.log('Key pressed: KEY_PAUSE/STOP');
api.pause();
} else if(keyCode == 37) {
console.log('Key pressed: KEY_LEFT');
api.nav.left();
} else if(keyCode == 39) {
console.log('Key pressed: KEY_RIGHT');
api.nav.right();
} else if(keyCode == 38) {
console.log('Key pressed: KEY_UP');
api.nav.up();
} else if(keyCode == 40) {
console.log('Key pressed: KEY_DOWN');
api.nav.down();
}
});
// Note: In case of BACK button press - exit player and back to content selection view in your app.
}
</script>
</body>
</html>