Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Parsing the JSON Video Result Set
The video results that are returned as the response are accessible via the request object. In order to access the results, we need to access the request’s responseText property and then parse it into a valid JSON string that we can work with. With the jsonparser included, this is very simple: All we do to parse the response as JSON is:
var gvideos = this.request.responseText.parseJSON();
Once we’ve parsed the response, we just need to get access the results, which are always included in a responseData object that includes an array named results. Iterating the results array allows us to access the properties of each video result and create an HTML structure to render the video results on the web page.
var results = gvideos.responseData.results;
Table 4—Google Video Search Properties
|
Property |
Description |
|---|---|
|
title |
Title of the video result. |
|
titleNoFormatting |
Title of the video result with no HTML. |
|
content |
Part of the video result content. |
|
url |
A url to the video. |
|
published |
The date the video was published. |
|
publisher |
The name of the person or company that published the video. |
|
duration |
The total time of the video in seconds. |
|
tbWidth |
The width of the video thumbnail. |
|
tbHeight |
The height of the video thumbnail. |
|
tbUrl |
The URL of the video thumbnail image. |
|
playUrl |
A URL to the flash version of the video that can be played on a web page by simply using the embed tag. |
|
author |
The YouTube username of the video author. |
|
viewCount |
The number of times the video was played. |
|
rating |
The rating of the video on a scaled from 1 to 5. |
Before creating the list of results, we’re going to create a placeholder div element and append it to the page. This div element will have an id of videoPlayer and will be used to hold a video. The video will be determined based on the video result that is chosen.
Next, we’ll make sure that there is always a video displaying in the videoPlayer div. To do this, we’ll start iterating the result set, and when we reach the first result we’ll call a new function called loadVideo. This function will add the video to the web page by receiving the URL to the video through the video result’s playUrl property. This property is a URL to the flash version of the video that can be played by simply adding it to an embed tag. Therefore, we’ll use the loadVideo function to find the videoPlayer element and then write an embed tag to its innerHTML property, which will in turn write the video to the web page.
Once we have the first video loaded, we’ll start creating a stacked list of video results by creating a div element with each video’s title and published date. This div will have a CSS class name of videoItem, so that we can apply some style to it. Next, we’ll set a temporary property called videoUrl to the playUrl property. This temporary property will then be used in an onclick event that calls the loadVideo function in order to play the video for that video result. It’s necessary to set this temporary property in order to keep scope within the loop—for example, if we tried to call playUrl property in the onclick event, it would always reference the last video result’s property.
To visually represent these video items, we’ll use the innerHTML property to include the thumbnail for the video using the tbUrl property. Next to the thumbnail, we’ll add the title with no HTML formatting and the date published using the titleNoFormatting and published properties. After all the video results have been added to a list, we’ll add an anchor tag to page through results. The anchor tag will have an onclick event that increases the GoogleAPI.Index and calls GoogleAPI.SearchVideo.
Listing 2: The GoogleAPI Object Makes Ajax requests, Parses Results, and Renders the Widget as HTML (GoogleAPI.js)
document.write('<script type="text/javascript" src="assets/js/jsonparser.js"></script>');
var GoogleAPI = new Object();
GoogleAPI.SearchVideos = function()
{
GoogleAPI.callback = GoogleAPI.onVideosSearched;
var gateway = "service/gateway.php?feed="+ escape("http://ajax.googleapis.com/ajax/services/
search/video?v=1.0&rsz=small&start="+ GoogleAPI.Index +"&q=")+ GoogleAPI.Query;
GoogleAPI.makeRequest(gateway);
}
GoogleAPI.onVideosSearched = function(request)
{
var divVideos= document.getElementById('gvideo');
divVideos.innerHTML = '';
if(this.request.responseText)
{
var gvideos = this.request.responseText.parseJSON();
var results = gvideos.responseData.results;
if(results.length > 0)
{
var videoPlayer = document.createElement('div');
videoPlayer.id = "videoPlayer";
divVideos.appendChild(videoPlayer);
for(var i=0; i<results.length; i++)
{
if(i == 0) GoogleAPI.loadVideo(results[i].playUrl);
var videoItem = document.createElement('div');
videoItem.className = 'videoItem';
videoItem.videoUrl = results[i].playUrl;
videoItem.onclick = function() { GoogleAPI.loadVideo(this.videoUrl); }
videoItem.innerHTML = '<div class="videoImage" style="background:
url('+ results[i].tbUrl +') center;"></div>';
videoItem.innerHTML += '<h1 class="title">'+ results[i].titleNoFormatting +'</h1>';
videoItem.innerHTML += '<em class="date">'+ results[i].published +'</em>';
divVideos.appendChild(videoItem);
}
var moreBtn = document.createElement('a');
moreBtn.href = "#"+(GoogleAPI.Index+1);
moreBtn.innerHTML = "More Videos >";
moreBtn.onclick = function() { GoogleAPI.Index++; GoogleAPI.SearchVideos(); }
divVideos.appendChild(moreBtn);
}
else GoogleAPI.ThrowError("There were no video results");
}
else GoogleAPI.ThrowError("There was an error receiving the videos feed");
}
GoogleAPI.loadVideo = function(videoUrl)
{
var videoPlayer = document.getElementById('videoPlayer');
videoPlayer.innerHTML = '<object width="320" height="265"><param name="movie"
value="'+videoUrl+'"></param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always"></param>
<embed src="'+videoUrl+'" type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="320" height="265"></embed></object>';
}
GoogleAPI.makeRequest = function(gw)
{
this.request = (window.XMLHttpRequest) ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");
this.request.onreadystatechange = function() { GoogleAPI.checkReadyState(); };
this.request.open('GET', gw, true);
this.request.send(gw);
}
GoogleAPI.ThrowError = function(msg)
{
alert(msg);
}
GoogleAPI.checkReadyState = function()
{
switch(this.request.readyState)
{
case 1: break;
case 2: break;
case 3: break;
case 4:
this.callback(this.request);
}
}
window.onload = function()
{
GoogleAPI.Index = 0;
GoogleAPI.Query = "Peachpit";
GoogleAPI.SearchVideos();
}