The vzaar Developer Hub

Welcome to the vzaar developer hub. You'll find comprehensive guides and documentation to help you start working with vzaar as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

Introduction & Setup

JS API Library

The API allows you to control, and get information about, media playback and the player itself.

To enable the JavaScript API, you must first include the vzaar library before the closing </body> tag on your website:

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

Enable API in Embed

You can then enable the API in your embeds by adding apiOn=true to video query strings:

<iframe id="vzvd-10355742" name="vzvd-10355742" title="vzaar video player" class="vzaar-video-player" type="text/html" width="416" height="234" frameborder="0" allowFullScreen allowTransparency="true" src="https://videos.vzaarsupport.com/10355742/player?apiOn=true"></iframe>

Instantiate the API

vzPlayer takes exactly one argument — a valid iframe ID — and will return an object on which you can call player's API methods:

var vzp = new vzPlayer("vzvd-10355742");
vzp.seekTo(1);

NOTE

The JS API relies on the id and name attributes in the iframe to be the same e.g. vzvd-1234567. Changing either or both may result in unexpected behavior.

Full Example

In order to manipulate a video with javascript you need to wait for the element to load on the page first. Simply place your JS API setup call within a page load event listener such as:

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

<iframe id="vzvd-14491325" name="vzvd-14491325" title="vzaar video player" class="vzaar-video-player" type="text/html" width="416" height="234" frameborder="0" allowFullScreen allowTransparency="true" src="https://view.vzaar.com/14491325/player?apiOn=true"></iframe>

<script>
  window.addEventListener("load", function(){
    var vzp = new vzPlayer("vzvd-14491325");
    vzp.seekTo(1);
  });
</script>