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

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