Revver Developer Center: Api : Json : Examples

Revver Developer Center

JSON API.Example Code

This Page
Related Pages


Introduction

All the examples on this page assume that you've already pre-loaded in the HEAD of your HTML page the javascript source for both the RevverJSONClient, and the Revver Player.


Single Video

This example grabs the most recent video from the Editor's Picks collection, using open.collection.collect. Unlike open.video.get which would require first that you have the id, the results will be an array, and so you must remember this otherwise you won't be able to access any of the properties of video object that's returned.

The code below is useful if you want to grab the most recent video in a collection/playlist. The most common usage will likely be for a user to have whatever is their most recent video on their home page, and then links to archived videos. Using Revver's JSON API, you can set a page up for this purpose and then not have to worry about updating it.

The example below displays the code and a live demo of the code. If you come back tomorrow, you will surely see a different video here.

to see live example, click here.

<div id="rev-player-1">to see live example, <a href="javascript:showDemo1()">click here.</a></div>
<br clear="all"/>
<script type="text/javascript">
var api = new Revver.API('https://api.revver.com/json/1.0');

var callbacks1 = {
    onSuccess: function (results) {
        var video = results[0];
        document.getElementById('rev-player-1').innerHTML = "";
        revverVideo.embed( {    mediaId : video.id,
                                affiliateId: 0,
                                width: 480,
                                height: 392,
                                usePrivateDiv: true,
                                divId: 'rev-player-1' } );
        var videoDiv = document.createElement('div');
        var videoText = document.createElement('div');
        if (document.all) {
            videoText.style.padding = "0px";
            videoText.style.margin = "3px";
        } else {
         videoText.setAttribute('style','margin:3px; padding:0px');
        }
        videoText.innerHTML = "<p><strong>" + video.title + "</strong> <em>by " + video.owner + "</em> | " + video.views + " views</p>";
        document.getElementById('rev-player-1').appendChild(videoDiv);
        videoDiv.appendChild(videoText);
    }
};

function showDemo1() {
    api.open.collection.collect(593, ['id','title','views','owner'], {limit: 1}, callbacks1 );
}

window.onload = showDemo1();
</script>

List of Videos

The example below uses open.video.find to grab the most recent three videos in the "video games" category. Categories are specially "tagged" sets of videos. Using just some very rudimentary DOM Javascript functions, we can construct list of thumbnails and information about the videos.

It would be rather trivial to include links to direct users to a particular page where the given video was embedded, like you may see on revver.com, but if you want to do anything really powerful, it is recommended that you invest some time to learn one of the many javascript libraries, such as jquery, mochikit, mootools, prototype, etc.

As in the example above, you can see both the code and the result in real-time below

If images do not load, click here.

<div id="rev-thumbs-2" style="display:inline;">If images do not load, <a href="javascript:showDemo2()">click here.</a></div>

<script type="text/javascript">
var api = new Revver.API('https://api.revver.com/json/1.0');

var callbacks2 = {
    onSuccess: function (results) {
        document.getElementById('rev-thumbs-2').innerHTML = "";
        for (x in results) {
            var video = results[x];
            var videoDiv = document.createElement('div');
            var videoLink = document.createElement('a');
            var videoThumb = document.createElement('img');
            var videoText = document.createElement('span');
            if (document.all) {
                videoDiv.style.padding = "5px";
                videoDiv.style.styleFloat = "left";
                videoDiv.style.width = "150px";
                videoThumb.style.border = "#000 3px solid";
            } else {
            videoDiv.setAttribute('style', 'float:left; width:150px; padding:5px;');
            videoThumb.setAttribute('style', 'border:3px solid;');
            }
            videoLink.setAttribute('href','http://www.revver.com/watch/'+video.id+'/'+video.slug);
            videoThumb.setAttribute('src', video.thumbnailUrl);
            videoThumb.setAttribute('style', 'border:3px solid;');
            videoText.innerHTML = "<br/><br/><strong>" + video.title + "</strong><br/><em>by " + video.owner + "</em><br/>" + video.views + " views";
            videoLink.appendChild(videoThumb);
            videoDiv.appendChild(videoLink);
            videoDiv.appendChild(videoText);
            document.getElementById('rev-thumbs-2').appendChild(videoDiv);
        }
    }
};

function showDemo2() {
    api.open.video.find({keywords:['video games'], tagsBy:'revver'}, ['id','title','views','owner','slug',['thumbnailUrl', {width:180, height:120}] ], {limit: 3}, callbacks2);
}

window.onLoad = showDemo2();
</script>

Paged Results

With the latest additions to the RevverJSONClient.js, we can now do "paged" results by utilizing the "pager" method. In this example we're grabbing the Editor's Pick's collection and paging through the results. Here we are only showing thumbnails, titles, owners and views, but you can of course show any of the returnFields for video.find in this example for your own projects.

To start demo, click here. 


<div style="float:left;">
    <a href="javascript:prev3()"><img src="/images/prev.gif" border="0"></a>
</div>
<div id="rev-thumbs-3" style="float:left;">
    To start demo, <a href="javascript:showDemo3()">click here.</a>
</div>
<div>
    <a href="javascript:next3()"><img src="/images/next.gif" border="0"></a>
</div>
<br clear="all"/>
<script type="text/javascript">
var api = new Revver.API('https://api.revver.com/json/1.0');
var currPage3 = 1;
var limit3 = 3;
var pager3 = api.open.collection.collect.pager(593, ['id','title','views','owner',['thumbnailUrl', {width:150, height:100}] ]);

var callbacks3 = {
    onSuccess: function (results) {
        document.getElementById('rev-thumbs-3').innerHTML = "";
        var count = results[0];
        var videos = results[1];
        for (x in videos) {
            var video = videos[x];
            var videoDiv = document.createElement('div');
            var videoThumb = document.createElement('img');
            var videoText = document.createElement('span');
                        if (document.all) {
                videoDiv.style.padding = "5px";
                videoDiv.style.styleFloat = "left";
                videoDiv.style.width = "150px";
                videoThumb.style.border = "#000 3px solid";
            } else {
            videoDiv.setAttribute('style', 'float:left; width:150px; padding:5px;');
            videoThumb.setAttribute('style', 'border:3px solid;');
            }
            videoThumb.setAttribute('src', video.thumbnailUrl);
            videoText.innerHTML = "<br/><br/><strong>" + video.title + "</strong><br/><em>by " + video.owner + "</em><br/>" + video.views + " views";
            videoDiv.appendChild(videoThumb);
            videoDiv.appendChild(videoText);
            document.getElementById('rev-thumbs-3').appendChild(videoDiv);
        }
    }
};

function showDemo3() {
    if (currPage3 < 1) { currPage3 = 1; }
    pager3.page(limit3, limit3*(currPage3-1), callbacks3);
}

function prev3() {
    currPage3 -= 1;
    showDemo3();
}

function next3() {
    currPage3 += 1;
    showDemo3();
}

window.onload = showDemo3();
</script>

Putting it Together

In the final example, we're constructing a "widget" of sorts. This example simple combines the paged results capabilties with the flexibility of a Revver Flash JS embed.


Your video will play here

To start demo, click here. 


<div id="rev-related-container" style="display:none;">
<div style="float:left;">
    <a href="javascript:prev4(1)"><img src="/images/prev.gif" height="20px" width="20px" border="0"></a>
</div>
<div id="rev-related" style="float:left;"></div>
<div>
    <a href="javascript:next4(1)"><img src="/images/next.gif" height="20px" width="20px" border="0"></a>
</div>
</div>
<br clear="all"/>
<div style="height:420px; border: 2px solid; width:480px; margin-left:58px;" id="rev-player-4"><h1 align="center">Your video will play here</h1></div>
<div style="float:left;">
    <a href="javascript:prev4(0)"><img src="/images/prev.gif" border="0"></a>
</div>
<div id="rev-thumbs-4" style="float:left;">
    To start demo, <a href="javascript:showDemo4()">click here.</a>
</div>
<div>
    <a href="javascript:next4(0)"><img src="/images/next.gif" border="0"></a>
</div>
<br clear="all"/>
<script type="text/javascript">
var api = new Revver.API('https://api.revver.com/json/1.0');
var currPage4 = 1;
var currRelatedPage = 1;
var limit4 = 3;
var pager4 = api.open.collection.collect.pager(593, ['id','title','views','owner',['thumbnailUrl', {width:150, height:100}] ]);
var relatedPager;

var callbacksRelated = {
    onSuccess: function (results) {
        document.getElementById('rev-related').innerHTML = "";
        var count = results[0];
        var videos = results[1];
        for (x in videos) {
            var video = videos[x];
            var videoDiv = document.createElement('div');
            var videoLink = document.createElement('a');
            var videoThumb = document.createElement('img');
            if (document.all) {
                videoDiv.style.padding = "2px";
                videoDiv.style.styleFloat = "left";
                videoDiv.style.width = "62px";
                videoThumb.style.border = "#000 1px solid";
            } else {
            videoDiv.setAttribute('style', 'float:left; width:62px; padding:2px;');
            videoThumb.setAttribute('style', 'border:1px solid;');
            }
            videoLink.setAttribute('href','javascript:showVideo4('+video.id+')');
            videoThumb.setAttribute('src', video.thumbnailUrl);
            videoThumb.setAttribute('style', 'border:1px solid;');
            videoLink.appendChild(videoThumb);
            videoDiv.appendChild(videoLink);
            document.getElementById('rev-related').appendChild(videoDiv);
        }
    }
};

var callbacks4 = {
    onSuccess: function (resultsandcount) {
        document.getElementById('rev-thumbs-4').innerHTML = "";
        var count = resultsandcount[0];
        var results = resultsandcount[1];
        for (x in results) {
            var video = results[x];
            var videoDiv = document.createElement('div');
            var videoLink = document.createElement('a');
            var videoThumb = document.createElement('img');
            var videoText = document.createElement('span');
            if (document.all) {
                videoDiv.style.padding = "5px";
                videoDiv.style.styleFloat = "left";
                videoDiv.style.width = "150px";
                videoThumb.style.border = "#000 3px solid";
            } else {
            videoDiv.setAttribute('style', 'float:left; width:150px; padding:5px;');
            videoThumb.setAttribute('style', 'border:3px solid;');
            }
            videoLink.setAttribute('href','javascript:showVideo4('+video.id+')');
            videoThumb.setAttribute('src', video.thumbnailUrl);
            videoThumb.setAttribute('style', 'border:3px solid;');
            videoText.innerHTML = "<br/><br/><strong>" + video.title + "</strong><br/><em>by " + video.owner + "</em><br/>" + video.views + " views";
            videoLink.appendChild(videoThumb);
            videoDiv.appendChild(videoLink);
            videoDiv.appendChild(videoText);
            document.getElementById('rev-thumbs-4').appendChild(videoDiv);
        }
    }
};

function showDemo4() {
    if (currPage4 < 1) { currPage4 = 1; }
    pager4.page(limit4, limit4*(currPage4-1), callbacks4);
}

function showRelated() {
    if (currRelatedPage < 1) { currReleatedPage = 1; }
    relatedPager.page(8, 8*(currRelatedPage-1), callbacksRelated);
}

function showVideo4(videoId) {
    api.open.video.get(videoId, ['id','title','owner','views'], {
        onSuccess: function(video) {
            document.getElementById('rev-player-4').innerHTML = "";
              revverVideo.embed( {    mediaId : video.id,
                    affiliateId: 0,
                    width: 480,
                    height: 392,
                    usePrivateDiv: true,
                    divId: 'rev-player-4' } );
            var videoDiv = document.createElement('div');
            var videoText = document.createElement('div');
            videoText.setAttribute('style','margin:3px; padding:0px');
            videoText.innerHTML = "<p><strong>" + video.title + "</strong> <em>by " + video.owner + "</em> | " + video.views + " views</p>";
            document.getElementById('rev-player-4').appendChild(videoDiv);
            videoDiv.appendChild(videoText);
        } } );
    relatedPager = api.open.video.find.pager({'related':videoId}, ['id','title','views','owner',['thumbnailUrl', {width:60, height:55}] ]);
    if (document.all) {
        document.getElementById("rev-related-container").style.display = "block";
    }
    document.getElementById("rev-related-container").setAttribute('style', 'display:block');
    showRelated();
}

function prev4(x) {
    if (x == 1) {
        currRelatedPage -= 1;
        showRelated();
    } else {
        currPage4 -= 1;
        showDemo4();
    }
}

function next4(x) {
    if (x == 1) {
        currRelatedPage += 1;
        showRelated();
    } else {
        currPage4 += 1;
        showDemo4();
    }
}

window.onload = showDemo4();
</script>