How to embed video
searh in web application:
Google has launched Ajax API for different purposes "video search" is one of them.
Many users' gets confused all about it many times how to get
google key, how to embed video search in web application.
So here I am explaining how to use video search in web
application.
Getting Google
Search API Key:
First you have to get the google search API key for this
http://code.google.com/apis/ajaxsearch/signup.html
Visit here and fill the information and then use of gmail
account to get the API key
Note: You can get
a gmail account free
The key page will look like this.
How to use this
code:
Now copy the whole HTML code:
This is the code for "WebSearch", Video Search and Blog
Search but you have to use only the "Video
Search" For this the next step.
"Video Search"
If you listen about Google Code (presented by Google)
You have to take the video search control from there.
Which is like this.
Just replace the above code with this:
google.load('search',
'1');
function OnLoad() {
// create a search
control
var
searchControl = new
google.search.SearchControl();
// So the results
are expanded by default
options = new
google.search.SearcherOptions();
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
// Create a video
searcher and add it to the control
searchControl.addSearcher(new
google.search.VideoSearch(), options);
Then the whole
code will look like this:
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">
<head>
<title>My Google
AJAX Search API Applicationtitle>
<script
src="http://www.google.com/jsapi?key=ABQIAAAABE_5tJYjIxZez706qj8fKhSHXJsp5oogWH5jZodYSc2VMsh-GBTebFLwydk8evvTefXYLwNiLYMO_A"
type="text/javascript">script>
<script language="Javascript" type="text/javascript">
google.load('search',
'1');
function OnLoad() {
// create a search
control
var
searchControl = new
google.search.SearchControl();
// So the results
are expanded by default
options = new
google.search.SearcherOptions();
options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
// Create a video
searcher and add it to the control
searchControl.addSearcher(new google.search.VideoSearch(), options);
// Draw the control
onto the page
searchControl.draw(document.getElementById("searchcontrol"));
// Search for a
YouTube channel
searchControl.execute("ytchannel:NBA");
}
google.setOnLoadCallback(OnLoad);
script>
head>
<body>
<div id="searchcontrol">Loading...div>
body>
html>
The final
output will look like this:
Formating the
Output:
If you want to format the output then you can use the style
tag.
Just use this code after closing the tag.
<style type="text/css">
body
{
font-family:Arial Rounded MT Bold;
background-color:Silver;
}
#searchcontrol
{
background-color:ActiveBorder;
width:50%;
margin-left:auto;
margin-right:auto;
text-align:left;
}
<style/>
The output
will look like this
NOTE : In my next upcoming article I'll examplain the whole
search techniquies of GOOGLE .
CONTINUE¦
Conclusion
We learned how to get the google Ajax search API key and how
to use video search in our web application.
-Nikhil Kumar