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>
<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>
<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)
}
$("#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>');
}
});
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>');
}
});
