YouTube Dynamic AJAX / JSON Search API Demo

• Download source code - 16.76 KB

Introduction

YouTube offers various APIs to allow websites to do pretty much anything they could otherwise do on the YouTube site. You can search for videos on YouTube from your site, upload videos, get a user's favorites, the "featured videos", and the list goes on. This article shows how to search dynamically for YouTube videos (by levereging the JSONP technique), parse the JSON response metadata to get attributes such as play count, rating of a video, etc. This site has a live demo of dynamic search and embedded player.

Background

Let me first define what I mean by dynamic search. Search is dynamic when the results to the search request are loaded right into the current page - you are not taken to another page as is the case with static searching, and the current page is not reloaded. Hence, this kind of search is dynamic, and makes use of the AJAX technology. Dynamic searching has key advantages over static searching, some of which are:

• It's faster because the rest of the page is not reloaded.
• It's asynchronous, meaning your browser does not block till the response comes back, which is yet another reason it is faster than static searching. 
• It's more seamless. It would allow you to, for example, while a user is filling out a form, to search for videos in the background without disrupting the user's work. If you navigate away from the page, as is the case with static searching, the user looses unfinished form data.

The reason I posted this article was that I first wanted to find a way to make searches dynamic on YouTube's development API page, and on forums, but to my dismay, I did not find an example, so I had to figure it out myself.

Before getting into the source code for dynamic searching though, you might want to familiarize yourself with the regular YouTube Search API Parameters and the YouTube API: JSON / JavaScript. Also check out this static search example.

Using the Code

Before getting into the source code, you might want to check out a live demo of dynamic searching here. In this article, I will post simplified snippets utilizing same APIs as the live demo site (a little less robust version of the code, and without the messy source code for error checking of corner cases, formatting, and presentation details) for the sake of easier understanding. To get the actual source code of the live demo site, you can open it in your browser, then from menu, View > Page Source, you will see all pertaining logic in index.html. Alternatively, you can open the page in your browser and then File > Save As... > Type: Web Page Complete, and you will have the files on your local machine.

The Dynamic (JSONP) Search Request

So we need to make a dynamic request to youtube APIs - i.e. make an AJAX request. There are various ways to make AJAX requests, the most popular way being the  XMLHttpRequest Object. Request via XMLHttpRequest are bound to same origin policy though - i.e. browser would not allow cross domain communication via the XMLHttpRequest Object, so it is not suited for our example. There are several ways to overcome the same origin policy restriction, one being the JSONP technique.

The example below uses the JSONP technique to submit a dynamic search request for "eminem we made you" to YouTube to:

• return a max of 8 results as specified by &max-results=8.
• return results sorted by relevance as specified by &orderby=relevance.
• YouTube to call the specified callback function showMyVideos(data) when the results come back.
• We specify we want the response data in JSON (as opposed to XML) using the &alt=json-in-script parameter. Note that it is a lot easier to parse JSON than XML in JavaScript; more about this later.
• The &format=5 tells YouTube to restrict results to videos that can be embedded on your site.
• The &fmt=18 tells YouTube to restrict results to videos that are avail be in HQ playback.
• Note that &ftm=18 has another big use: adding &ftm=18 to the end of the URL will play the video in HQ mode (try http://www.youtube.com/watch?v=2o8UgIgI8BU&fmt=18 vs. http://www.youtube.com/watch?v=2o8UgIgI8BU). Also, adding &fmt=18 as a parameter to the embedded player will play the video in HQ on your embedded player. This trick does not work with the chromeless player though, but currently there is a request for this feature being tracked here.

//create a JavaScript element that returns our JSON data.
var script = document.createElement('script');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');    
script.setAttribute('src', 'http://gdata.youtube.com/feeds/videos?vq=eminem ' + 
       'we made you&max-results=8&alt=json-in-script&' + 
       'callback=showMyVideos&orderby=relevance&' + 
       'sortorder=descending&format=5&fmt=18');

//attach script to current page -  this will submit
//asynchronous search request, and when the results come back 
//callback function showMyVideos(data) is called and the results passed to it
document.documentElement.firstChild.appendChild(script); 

More on JSONP  

Now that you have seen it in action let me briefly touch a little more on the background of JSONP. JSONP has become a popular abbreviation since I would say about 2010. Note though that this technique has been supported by browsers way before 2010. So this is an old technique with a new name, so no need to worry if it will on old browsers. In fact it should work on as far back as IE 6.  This is the earliest mention of JSONP I could find - site.   

For those wondering if there are any security vulnerabilities to this technique, I mean afterall we are injecting external script into our site, - this is a big topic details of which are beyond the scope of this article but the long and short of it, my conclusion, is that there are no security vulnerabilities with JSONP if 1) you trust the web service, 2) you only transfer public data through JSONP (no private data such that is returned only when user is logged in).  And since the example in this article makes request to Google servers, which I trust, and does not ask for any private data, I trust the security. To understand the reasoning behind this conclusion I recommend going through this article which is a very thorough coverage of JSONP vulnerabilities.

Parsing the Results

The search request above will result in showMyVideos(data) being called (asynchronously) when the results are back. Below is an example of a callback function parsing and outputting a few attributes from the response meta data.

function showMyVideos(data) 
{
    var feed = data.feed;
    var entries = feed.entry || [];
    var html = ['<ul>'];
    for (var i = 0; i < entries.length; i++) 
    {
        var entry = entries[i];
        var playCount =    entry.yt$statistics.viewCount.valueOf() + ' views';
        var title = entry.title.$t;
        var lnk = '<a href = \"' + entry.link[0].href + '\">link</a>';
        html.push('<li>', title, ', ', playCount, ', ', lnk, '</li>');
    }
    html.push('</ul>');
    document.getElementById('videoResultsDiv').innerHTML = html.join('');
}

You can see that you can traverse the JSON data like you traverse objects, arrays etc., much the same way you use variables in languages like C or Java. This is because JSON is embedded into the JavaScript language. Were the response in XML, you would have to implement a parser yourself.

You can see all of the JSON meta data in most JavaScript debuggers in the watch window. I used Firebug for Firefox, set a breakpoint on the first line of the callback function, and here is the screen capture - from the variable watch, you can quickly look up what data interests you and then access it just like a variable in your JavaScript code.

The Complete HTML

Here is the complete HTML code. To recap: this code will dynamically query 'Eminem we made you' on YouTube and parse a few attributes and output them on the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
           xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Search Snippet</title>
    <script src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">

        function searchClicked()
        {
            document.getElementById("videoResultsDiv").innerHTML = 
                                    'Loading YouTube videos ...';

            //create a JavaScript element that returns our JSON data.
            var script = document.createElement('script');
            script.setAttribute('id', 'jsonScript');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', 'http://gdata.youtube.com/feeds/' + 
                   'videos?vq=eminem we made you&max-results=8&' + 
                   'alt=json-in-script&callback=showMyVideos&' + 
                   'orderby=relevance&sortorder=descending&format=5&fmt=18');

            //attach script to current page -  this will submit asynchronous
            //search request, and when the results come back callback 
            //function showMyVideos(data) is called and the results passed to it
            document.documentElement.firstChild.appendChild(script);
        }

        function showMyVideos(data)
        {
            var feed = data.feed;
            var entries = feed.entry || [];
            var html = ['<ul>'];
            for (var i = 0; i < entries.length; i++)
            {
                var entry = entries[i];
                var playCount = entry.yt$statistics.viewCount.valueOf() + ' views';
                var title = entry.title.$t;
                var lnk = '<a href = \"' + entry.link[0].href + '\">link</a>';
                html.push('<li>', title, ', ', playCount, ', ', lnk, '</li>');
            }
            html.push('</ul>');
            document.getElementById('videoResultsDiv').innerHTML = html.join('');
        }

    </script>

    </head>

    <body id="page">
        <div>
            <p>
                <input name="searchButton" type="submit" 
                  value="Search for eminem we made you" onclick="searchClicked()"/>
            </p>
            Results:<br/>
            <div id="videoResultsDiv"></div> 
            <!-- ShowMyVideos() will populate this div with results-->
        </div>
    </body>
</html>

History

• 31^st October, 2009: Initial post
• 1^st November, 2009: Article updated