Javascript API 2.0

Introduction and setup

The API allows you to control and get information about media playback and audio from the vzaar player using JavaScript. Now that it's available through our iFrame embed it also means you can combine it with our security features such as domain control and signed keys.

To enable the JavaScript API, you must first include the vzaar library:

<script src="http://player.vzaar.com/libs/flashtakt/client.js" type="text/javascript"></script>

You must also add the query string ?apiOn=true in your embed code:

<iframe src="http://view.vzaar.com/video_id/player?apiOn=true" ...></iframe>

Note that the JS API relies on the `id` and `name` attributes in the iframe being the same e.g. `vzvd-1234567`. Changing either or both may result in unexpected behavior. If you use the iframe we provide, this should not be a problem.

After that,  window.vzPlayer(id:string) method will be available. vzPlayer takes exactly one argument - a valid iframe ID, and will return the object on which you can call player's API methods:

var vzp = new vzPlayer("vzvd-918833");
vzp.play2();

Available functions

The following functions are available from JavaScript and assume that the reference to the player is called  vzp

vzp.ready(function() { ... })

When the player is ready, you can add events like "playState", "progress" and "interaction"

vzp.play2():void
Plays the video, if it is paused or not yet started. Replays the video if it is at the end.

vzp.pause():void
Pauses the video if it is playing.

vzp.playPause():void
Toggles the play/pause status of the video, i.e. plays the video if paused or pauses it if it is playing. Plays the video if it has not yet started. Replays the video if it is at the end.

vzp.seekTo(seconds:Number):void
Seeks to the specified position in the video (in seconds).

vzp.getTime(function(time) { ... }):void
Returns the current play time of the video to the callback function (in seconds, to 2 decimal places).

vzp.getTotalTime(function(time) { ... }):void
Returns the duration of the video to the callback function (in seconds, to 2 decimal places).

vzp.setVolume(volume:int):void
Sets the volume of the player to the specified value (from 0 to 5).

vzp.getVolume(function(vol) { ... }):void
Returns the current volume of the player to callback function (from 0 to 5).

vzp.muteOn():void
Mutes the player if it is currently unmuted.

vzp.muteOff():void
Unmutes the player if it is currently muted.

vzp.muteToggle():void
Toggles the mute status of the player on or off, depending on its current status.

vzp.getMute(function(value) { ... }):void
Returns the current mute status of the player to callback function (true/false).

vzp.loadVideo(id:int):void
Loads the video specified by its id number.

vzp.playlistPlay(index:int):void
Starts playing a video from the current playlist, specified by its position in the playlist.

vzp.addEventListener(event:String, function(value) { ... }):void
Listens for events dispatched from the player and executes the listener function. The following events are available:

playState
Dispatched when playback begins ("mediaStarted"), ends ("mediaEnded"), is playing ("mediaPlaying") and is paused ("mediaPaused").

progress
Dispatched every 10% of the media viewed ("10percent", "20percent", etc).

interaction
Dispatched on the following player interactions: "pause", "resume", "fullscreenon", "fullscreenoff", "scalingon", "scalingoff", "soundOn", "soundOff", "seekbar", "seekbarhandle".

Example code

<script type="text/javascript">
    window.addEventListener("load", function() {
        var vzp = new vzPlayer("vzvd-1054835");


        // adding play2() API method to DOM element:
        var myPlayButton = document.getElementById("play_button");
        myPlayButton.addEventListener("click", function() {
            vzp.play2();
        });


        // adding getTime(callback) API method to DOM element:
        var getTimeButton = document.getElementById("get_time_button");
        getTimeButton.addEventListener("click", function() {
            vzp.getTime(function(time) {
                console.log(time);
            });
        });


        // set up "playState" event listener for player status:
        vzp.ready(function() {
            vzp.addEventListener("progress", function(state) {
                console.log(state);
            });
        });
    });
</script>

There are many examples of player automation and other client-side scripting at:  http://vzaarsupport.com/

Note: While the JS API uses the id attribute of the iframe to create the player object, the player relies on the name attribute so you should not remove it from the iframe.

Still need help? Contact Us Contact Us