JavaScript API

1. JSAPI Connection.

<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 nameInput typeOutput typeDescription
getVersion()-stringGet player version
play()-voidStarts media playback.
pause()-voidPause media playback.
playPause()-voidToggle 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)numbervoidSeek media to time position in seconds.
setVolume(value)numbervoidSet volume, accept value in range from 0 to 1, example: 0.75.
setMute(value)booleanvoidMute player when “true” passed. Unmutes with previous volume on “false” value.
on(actionName, handler)string, functionvoidAdd event listener for supported actions. Supported action names: "close".
add(eventClassName, handler)string, functionvoidAdd event listener.
addOnce(eventClassName, handler)string, functionvoidAdd single event listener. It is only once triggered, then removed.
remove(eventClassName, handler)string, functionvoidRemove event listener.
toggleFullscreen()-voidToggle 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()-voidForce player to repaint UI. Solves problems, when player was hidden/shown by external JS and sometimes UI needs to be repainted.
pictureInPicture.isAvailable()-boolReturns if browser supports Picture-in-Picture mode for video.
pictureInPicture.enter()-voidTriggers entering Picture-in-Picture mode for selected player.
pictureInPicture.leave()-voidLeave Picture-in-Picgure mode for selected player.
appGoingBackground()-voidNotify player that web app is moving to background.
appGoingForeground()-voidNotify player that web app is moving to foreground from background.

3. Events.

Event name (string)Description
AdEvent.adConnectionErrorThere was network issue with ad.
AdEvent.adCurrentTimeChangeAd playback time was updated.
AdEvent.adGroupCurrentTimeChangeAd group playback time was updated.
AdEvent.adCompleteSingle ad in ad break just completed.
AdEvent.adDisableControlsAd break is starting and player controls was hide.
AdEvent.adEnableControlsAd break ended and player controls were show.
AdEvent.adInStreamPlayingAd break (injected into main video stream) just started.
AdEvent.adInStreamEndAd break (injected into main video stream) just ended.
AdEvent.adInStreamClipPlayingInjected into main stream ad started in ad break.
AdEvent.adInStreamClipEndInjected into main stream ad ended in ad break.
AdEvent.adMediaErrorCannot play / decode video file for ad.
AdEvent.adPausedAd was paused.
AdEvent.adPlayingAd or ad break just started.
AdEvent.adSkipButtonShowAd skip button was shown (because of ad configuration).
AdEvent.adSkipClickAd skip button was clicked.
ControlEvent.fullscreenFull screen mode was toggled.
ControlEvent.skinVolumePlayer volume was updated. Volume level in event.data field (0.0 - muted, 1.0 - full volume).
ControlEvent.skinPlayUser requested to play video, but it is not playing yet.
ControlEvent.skinPauseUser requested to pause video.
ControlEvent.skinPlayPauseUser requested to toggle between play / pause player state.
DataProviderEvent.mediaMetadataDataNew media metadata is available. Details in event argument.
DataProviderEvent.adMetadataDataNew ad media metadata is available. Details in event argument.
DataProviderEvent.subtitleDataInfo about subtitles tracks.
DataProviderEvent.audioDataInfo about audio tracks.
VideoEvent.accessDeniedAccess denied error occurred.
VideoEvent.bufferingStartVideo/Audio buffering just started.
VideoEvent.bufferingEndBuffering ended and playback can be continued.
VideoEvent.completeMedia playback was completed.
VideoEvent.connectionErrorNetwork issue occurred - cannot connect with streaming server.
VideoEvent.currentTimeChangeMedia playback current time was changed.
VideoEvent.durationChangeMedia duration time was changed.
VideoEvent.loadErrorNetwork issue occurred.
VideoEvent.mediaErrorMedia decode issue - broken video or not compatibile.
VideoEvent.mediaErrorFallbackTryPlayer fallback mechanism triggered - trying to resume interrupted playback.
VideoEvent.playbackPermamentErrorError occurred during playback and player was unable to solve it.
VideoEvent.playingMedia playback was started.
VideoEvent.pausedMedia playback was paused.
VideoEvent.seekingStartSeeking over video was started.
VideoEvent.seekingEndSeeking over video ended and playback can be continued.
VideoEvent.drmAuthenticationCompleteDRM authentication complete - video can be decoded with provided keys
VideoEvent.drmAuthenticationErrorCannot decode video with provided keys or other error occurred related with authentication.
VideoEvent.drmAuthenticationNeededPlayer 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.

  1. Open player configurator page (open page: https://bradmax.com/client/panel/admin/player/list and create new player or select one for edition ).
  2. Select “Skin configuration” > "end splash".
  3. 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.

  1. Open player configurator page (open page: https://bradmax.com/client/panel/admin/player/list and create new player or select one for edition ).
  2. Select “Skin configuration” > "end splash".
  3. From available types choose “countdown” or “tiles”. For these types player will correctly handle playlist.
Jump to