Getting list of public videos with JavaScript/jQuery

vzaar allows you to integrate its functionality into any kind of application you are developing, the example below will show you how to list videos on your web page or web application with the use of JavaScript and bit of jQuery Framework.


You can add jQuery to your HTML page from Google CDN like this:

This was you won't need to store library files on your host and it will save you a bit of the bandwith as well.

Our scenario is pretty simple, we have to connect to the vzaar API and call Video List method to get all the videos that are available.

Please note that only videos marked as Public will be listed on this call, if you have videos marked as private they won't be seen In order to list private videos will need you to implement your own handler with any of the API libs we provide.

Code below gets executed on page 'onload' event, so once that occurs it will perform getJSON call to vzaar API, where you will need to provide your vzaar username (marked in code below as USERNAME_HERE).

HTML code:

<table id="videos"></table>

JavaScript code:

$(function() {
    $.getJSON('', 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');

Result of this call will be an array of objects as described in Video List Response section here.

So now in our code we just create a loop for this array of objects in order to extract the video metadata and render video thumbnails and their titles within videos HTML table we defined on our HTML page.

Basically that's it, now you can extend this code bit with any additional functionality you might need, like adding mouse-click event on thumbnails to play actual video and so on.