Introduction

The Revver Website widget’s default behavior is that when the user selects a thumbnail a virtual window opens ontop of the screen and presents the movie along with its pertinent meta-data. This is done using “lightbox”, a very common javascript function seen in many websites today.

However, you may wish to use “thickbox” or “slimbox” or even your own creation entirely. You may also wish to add visual effects or maybe even not use a lightbox at all, but rather render the results into a DIV of your choosing.

Using “onShowMovie”

In fact, the widget supports all of these options, by utilizing the “onShowMovie” parameter. When set, the “onShowMovie” parameter indicates a function or callback that will be called when the thumb is selected.

the entire video object is actually passed upon thumb selection, and optionally (if an affiliate is provided) the affiliateId.

As with any callbacks, you can either have an anonymous function in-line as part of the code, or create a separate named function that accepts the video object and the affiliateId as params.

Code Examples

Using the anonymous in-line callback:

// as part of the REVVER.widget.VideoCollection call:
"onShowMovie": function (video, affiliateId) {
        document.getElementbyId('rev-player').innerHTML = "";
	revverVideo.embed( {    mediaId : video.id,
                    affiliateId: affiliateId,
                    width: 480,
                    height: 392,
                    usePrivateDiv: true,
                    divId: 'rev-player' } );
}

Using the named function:

// as part of the REVVER.widget.VideoCollection call:
"onShowMovie": displayMovie

// defined elsewhere in the JS code
function displayMovie(video, affiliateId) {
        document.getElementbyId('rev-player').innerHTML = "";
	revverVideo.embed( {    mediaId : video.id,
                    affiliateId: affiliateId,
                    width: 480,
                    height: 392,
                    usePrivateDiv: true,
                    divId: 'rev-player' } );
}

Both of the above examples perform the same function. In this case, they clear the contents then place a player into a div with the id “rev-player”. Using this model, you can create just about any functionality you like.

Video Object

The video object being passed contains the following fields:

status,
description,
views,
author,
url,
duration,
ageRestriction,
quicktimeMediaUrl,
owner,
affiliateId,
publicationDate,
modifiedDate,
keywords,
title,
credits,
thumbnailUrl,
id

Additional Help

For more detail on any of these return fields, feel free to review the JSON open.video.find specification at: http://developer.revver.com/api/json/methods#openvideofind.

Note: the returnField for thumbnailUrl uses the advanced returnField functionality and returns a thumbnail that corresponds to the size you specify. If you do not specify a size for the thumbnail, then the default size of 120×90 pixels is used.

We hope this has been useful. Please feel free to post your examples and/or comments below.