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.

					<!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="">
					 </head>

					 <body>
					  <div>Keywords : <input type="text" id="q" name="q"></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 type="button" value="Search" onclick="getCamideoFeed();">
						<div id="response"></div>
					 </body>
					</html>

And the out put will look like:

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://api.camideo.com/?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

Camideo Video API JavaScript/jQuery Example

Camideo Video Search API - JavaScript, jQuery Example

Generate API Key