Working with Vzaar via jQuery and JSON

For those who wants to use Vzaar from HTML based applications, here is the little hint for you, actually few. First of all use ‘official API’ URLs, here http://developer.vzaar.com/docs/ you can find all necessary information about how to make an account, how to connect to Vzaar,  and what parameters you can send to API in order to get your data in format you need including with some filtering applied.

You also have to be aware of that on Vzaar you can have two types of of accounts one is sandbox account that you are using for ‘trial’ and testing purposes and another one is ‘live mode’ account. For both accounts you need to generate token if you are going to use some video manipulations and want to have access to private videos. If you are just about to make ‘another Youtube’ service and want to play some videos from other users, you can do it without token, as long as someone’s video is public it can be embedded anywhere.

Vzaar API available with XML and JSON interfaces, following example shows how to connect to ‘Video List’ end point described here http://developer.vzaar.com/docs/version_1.0/public/video_list

In this example we are using jQuery in order to access Vzaar API, following code extracts list of videos and shows video thumbnail and video title one after another one.

$(function() {
   $.getJSON('http://vzaar.com/api/skitsanos/videos.json?callback=?', function (videos) {
    for (var i = 0, l = videos.length; i < l; i++) {
     var video = videos[i];
     $('<tr><td><img src="' + video.thumbnail + '"/><br/><div class="ui-widget-header">' + video.title + '</div></td></tr>').appendTo('#videos');
    }
   });
  });

URL like this http://vzaar.com/api/skitsanos/videos.json?callback=? will tell you that I’m connecting on live mode API account (otherwise it would be sandbox.vzaar.com) for user skitsanos and i want my data in JSON format. Last parameter callback=? tells jQuery that function handler is embedded within my getJSON body. As result of this service call i will receive Videos object as it described here http://developer.vzaar.com/docs/version_1.0/public/video_list

You can download complete working sample from here http://vzaar.googlecode.com/svn/trunk/api/php/trunk/tests/jQueryCallbacks/