Monday 30 July 2012

JSON Video Search YouTube, Vimeo, MySpace, DailyMotion, MetaCafe, SoundCloud

Camideo Video Search API - JavaScript, jQuery Example


In this tutorial we will try to show you how to use our Camideo Video Search API and it's JSON feed using JavaScript, jQuery.

Technologies used in this article:
  • JavaScript
  • jQuery
  • HTML

In this example we are going to parse video feed from YouTube, Vimeo, MySpace, Dailymotion, MetaCafe, SoundCloud. For more detailed description about Camideo Video Search JSON feed you may read our Camideo Video Search API documentation. 

1. Create the Search Form in HTML

 

First we have to create a HTML page where we will take the inputs. There are two inputs that we are going to take from user: Search Criteria and Source.

<title> New Document </title><br />
<div>Keywords : <input id="q" name="q" type="text" /></div>
<div>Source   : <select id="source" name="source">
                        <option value="youtube">YouTube</option>
                        <option value="vimeo">Vimeo</option>
                        <option value="myspace">MySpace</option>
                        <option value="metacafe">MetaCafe</option>
                        <option value="dailymotion">DailyMotion</option>
                        <option value="soundcloud">SoundCloud</option>
                    </select>
</div>
<div>
     <input onclick="getCamideoFeed();" type="button" value="Search" />
     <br />
     <div id="response"></div>
</div>

2. Include jQuery and Make Call 

You might need a API key to make a call. Please use our Key Generation Tool to get one. Once you have that you can make a call to our API. So our index.html will look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    function getCamideoFeed(){
        var q = $("#q").val();
        var source = $("#source").val();

        var url = 'http://www.camideo.com/api/?key=API_KEY&source=' + source + '&q='
                    + q + '&response=json&page=1';

        $.getJSON(url, function(data) {
                //do your parsing..
            });
    }
  </script>
 </head>

 <body>
  <div>Keywords : <input type="text" name="q"></div>
    <div>Source   : <select name="source">
                        <option value="youtube">YouTube</option>
                        <option value="vimeo">Vimeo</option>
                        <option value="myspace">MySpace</option>
                        <option value="metacafe">MetaCafe</option>
                        <option value="dailymotion">DailyMotion</option>
                        <option value="soundcloud">SoundCloud</option>
                    </select>
    </div>
    <div><input type="button" value="Search" onclick="getCamideoFeed();">
    <div id="response"></div>
 </body>
</html>

3. Cheking for error in JSON Output

We might have encountered an error in our call. So it's better to check for error and show user a message in case of error. We will add these lines in our getCamideoFeed() method:

if(data.Camideo.Error){
    $("#response").html(data.Camideo.Error.description)
}

4. Everything is fine. Let's parse the feed

Now we have error free feed. Let's modify our getCamideoFeed() to show the videos.

$.each(data.Camideo.videos, function(i, object) {
    if(source == "metacafe" || source == "myspace"){
        $("#response").append('<div class="thumb">' +
            '<embed flashVars="playerVars=autoPlay=no" src="' + object.embedCode + '" width="390" height="290" wmode="transparent" allowFullScreen="true" allowScriptAccess="always" name="Metacafe_' + object.videoId + '" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>' +
            '</div> <!-- thumb ends -->' +
            '<div class="videoDetails">' +
            '<div class="videoTitle">' +
                '<a target="_blank" href="' + object.link + '" title="' + object.title + '" rel="nofollow">' +
                    '<h2>' + object.title + '</h2>' +
                '</a>' +
            '</div>' +
            '<div class="videoDesc">' +
                object.description +
            '</div>' +
            '<div>' +
                'Uploaded by ' +
                    '<a class="videoAuthor" href="' + object.authorLink + '" rel="nofollow" target="_blank" title="' + object.author + '">' +
                        object.author +
                    '</a> | ' +
                'Length ' +
                    '<span class="videoWhiteText">' +
                        object.duration +
                    '</span> | ' +
                    '<span class="videoWhiteText">' +
                        object.views +
                    '</span> views' +
            '</div>');
    }else{
        $("#response").append('<div class="thumb">' +
            '<iframe type="text/html" width="390" height="290" src="' + object.embedCode + '"' +
            'frameborder="0"></iframe>' +
            '</div> <!-- thumb ends -->' +
            '<div class="videoDetails">' +
            '<div class="videoTitle">' +
                '<a target="_blank" href="' + object.link + '" title="' + object.title + '" rel="nofollow">' +
                    '<h2>' + object.title + '</h2>' +
                '</a>' +
            '</div>' +
            '<div class="videoDesc">' +
                object.description +
            '</div>' +
            '<div>' +
                'Uploaded by ' +
                    '<a class="videoAuthor" href="' + object.authorLink + '" rel="nofollow" target="_blank" title="' + object.author + '">' +
                        object.author +
                    '</a> | ' +
                'Length ' +
                    '<span class="videoWhiteText">' +
                        object.duration +
                    '</span> | ' +
                    '<span class="videoWhiteText">' +
                        object.views +
                    '</span> views' +
            '</div>');
    }
});

5. Download Source Code


2 comments:

  1. terimakasih tapi saya memakai PHP utntuk parsing JSON nya :)

    ReplyDelete
  2. The key generator is giving warning are developers sleeping... put the site down.. shut it off useless

    ReplyDelete