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(timeMs)numbervoidSeek media to time position in milliseconds.
setVolume(value)numbervoidSet volume, accept value in range from 0 to 1, example: 0.75.
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.

3. Events.

Event name (string)Description
DataProviderEvent.mediaMetadataDataEvent is triggered when media metadata are avaliable.
VideoEvent.playingEvent is triggered when media playback was started.
VideoEvent.pausedEvent is triggered when media playback was paused.
VideoEvent.currentTimeChangeEvent is triggered when media playback current time was changed.
VideoEvent.durationChangeEvent is triggered when media duration time was changed.
VideoEvent.completeEvent is triggered when media playback was completed.
VideoEvent.loadErrorEvent is triggered when player cannot load requested data.
VideoEvent.mediaErrorEvent is triggered when player cannot play media.

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.bigsoda.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.bigsoda.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.