Google AJAX Search API » Video Search Control

 
Sample Video Search Control using » Google Ajax Search API  
 
Loading...

When a user clicks on a thumbnail of a video within the bar, the video is displayed in a player above the list

Move To  

Google AJAX Search API key  
 
To use google API's within a web-site/blog, you need to have an API KEY that is specific to the URL/URI of website/blog.

For the Google Ajax Search API, you may generate just the key for your website/blog or you can use the wizard to generate the key along with the code relating to an application based on the Ajax Search API.

Video Bar, Video Search Controls are applications based on the Google Ajax Search API.

Using the wizard would be a convenient alternative, where you are starting just now.

Generate Search Control Code (including a key for your blog/website)  
 
  • Move to the Wizard page http://www.google.com/uds/solutions/wizards/videosearch.html
    It has a wizard which enables you to generate the required code along with a key for your blog/website at a single go.
  • Fill the details required and the url of your website/webpage/blog in the relevant text box
  • Click generate.

Move To  

Generate Just the Google AJAX Search API key  
 
If you intend to generate just a key specific to the URL/URI of your website/blog. This may be the case where you have collected the video bar code from elsewhere and intend to change just the key in the code.

This key would be used

  • For all instances of the use of google AJAX Search API that you may use on the same web site/blog.
  • For all applications (used within the web site/blog) based on the Google AJAX Search API.

You can generate the key as many times as you want, but each time a new key would be generated.

» Code Generate

While displaying the generated key, you would find html code also getting generated and displayed below the key.

That code is not specific to the Videobar Application. To avoid confusion use the Videobar WIZARD to generate the code you need for the video bar.

Greater Customization of the Video Search Control

The explanation below this is for those who have an interest in hanlding programme code and are interested in learning things in detail.

Include the code in your blog or web page  
 
To make the video search control appear in your blog or web page, include the code within the html code of your web page.

In blogger blog, if you are using the modern widget based template for your blog, you can include (paste) the code within a HTML/Javascript Page Element (widget).

If you have not used the wizard, ensure that the Access Key you generated is used in the code being placed.

Positioning the Video Search Control  
 

» In any Web Page

You can place the search control anywhere on your web page. The player displays the video when a user clicks on a thumbnail of a video within the bar.

Division displaying the player
<div id="videoControl">
      ...
</div>

When a user clicks on a thumbnail of a video within the bar, the video is displayed in a player above the list. The list and the player stay together.

Place the html code relevant to division displaying the control at the location where you want them to appear.

» In a blogger Blog

In blogger blog, if you are using the modern widget based template for your blog, you can position the widget where you want the video search control to appear.

Greater Customization of the Video Search Control

The explanation below this is for those who have an interest in hanlding programme code and are interested in learning things in detail.

Move To  

Loading the Ajax API & Video Search Control  
 

• STEP 1

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR-KEY"
    type="text/javascript"></script>
<link href="http://www.google.com/uds/css/gsearch.css"
    rel="stylesheet" type="text/css"/>

<script src="http://www.google.com/uds/solutions/videosearch/gsvideosearch.js"
    type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videosearch/gsvideosearch.css"
    rel="stylesheet" type="text/css"/>
The first step in the process of generating and displaying the video search on your web page is putting this code in your web page.

This code can be placed within the head section or the body section of the web page. If you are using a wizard to create the code, you would be placing all the code at a single place, i.e. the body section where you intend the video search results to appear.

• First Two Files need not be placed

The code for including the first two files need not be placed again if it had been included in an earlier case, like in the case of including a video bar within the same page. Though there is no harm in including it a second time, it serves no purpose.

• What are they for?

  • <script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=YOUR-KEY" type="text/javascript"></script>

    This piece of code will load the javascript file that contains the code for loading the API.

    Insert the key related to the web-site/blog as the value of the attribute key. Replace YOUR-KEY with the key value.
    The key will be something link this
    ABQIAAAAMd2FR-mxI0yUvhJz6zQQYBTfvFclNcXDFS7jtJMMTTO2s4OnbxTuH_9-0PEJYspBd7zlccTEaPzakQ

    You can generate a key by logging into a google account and entering the url for the website/blog. The key would be functional only for the url and any subfolders within it.

  • <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css"/>

    This piece of code will load the css file that contains the general formatting options .

  • <script src="http://www.google.com/uds/solutions/videosearch/gsvideosearch.js" type="text/javascript"></script>

    This piece of code will load the javascript file that contains the code for creating the video search area displaying the search results, the search bar and the video player while playing the video.

  • <link href="http://www.google.com/uds/solutions/videosearch/gsvideosearch.css" rel="stylesheet" type="text/css"/>

    This piece of code will load the css file that contains the formatting options relating to the video search area.

Positioning the Division displaying the Video Search Results & Player  
 

• STEP 2

<div id="videosearch">Loading...</div>
Position the division wherever you want within the web page.
  • <div id="videosearch">Loading...</div>

    This division displays the thumbnail results of the video search, the search bar and the player when a user clicks on the thumbnail within the results.

The text "Loading ..." indicates the default text that is displayed within the division till it is filled with content.

Formatting the Division  
  
<style type="text/css">
#videosearch {
  width : 400px;
  margin : 10px;
  padding : 4px;
  border : 1px solid #f9f9f9;
}
</style>
The four files that are loaded initially in the web page contain the css files that include the definitions for formatting the search bar, the video player and the thumbnails. To override the options set in those files as well as to use options that have not been defined in them, you should insert additional style code.

The style definitions are to be included within the <style> tag and placed within the web page head section preferably. When you use the wizard for creating the code, this gets placed along with all other code.

The code for formatting the division with the ID videosearch is given here. Any other css formatting code that is to be used can be included within the same style element.

This is only optional and is thus not marked as a step.

Move To  

Creating and Configuring the Video Search Control  
  
<script type="text/javascript">
function LoadVideoSearch() 
{
   var defaultTags = [
     { query : "big wave surfing", label : "surfing" },
     { query : "[panda bear" },
     { query : "adnan sami", label : "adnan" }
      ];
   var options = {
     twoRowMode : true
     };
   new GSvideoSearchControl(
		document.getElementById("videosearch"),
		defaultTags, 
		null, 
		null, 
		options
		);
}
GSearch.setOnLoadCallback(LoadVideoSearch);
</script>

• STEP 3 (Last)

Include this script within the web page either in the head or the body section. As far as possible place the code along with the other related code, so that you don't lose track of it.

The script is executed as when it is encountered by the browser. If it is placed within the head section of the web page, it is executed before the body content is loaded.

The function GSearch.setOnLoadCallback() at the end of the script code, calls the function LoadVideoSearch() and cause the code within it to get executed.

• LoadVideoSearch() execution

The execution of the function LoadVideoSearch() will result in
  • Declaration of a variable by name defaultTags and assignment of values that would work as of keywords for the search.
  • Declaration of another variable with the name "options" assignment of the values which represent the various options with which the video search is initialized. Multiple values assigned are to be separated by commas.
  • The function GSvideoSearchControl() is called to create the video search object. The Id of the division that would hold the search result, the default tags, and the options are passed on to the function as arguments.

Video Search Options  
 
There are a number of options that can be chosen for the video search. In the above example, these options are assigned to the variable by name "options" and passed on to the video bar object. They form the arguments for the function call creating the videobar object. 
...
   ...
   var options = { 
                largeResultSet : true, 
                twoRowMode : true
                }
   ...
   ...

The available options are

• Number of Results » largeResultSet : true

By default the video bar is set to display 4 video thumbnails. To display upto 8 video thumbnails, use the argument largeResultSet : true.

This may be set to be false or completely ignored to set the fewer number of results to be displayed.

• Two Row Display Mode » twoRowMode : true

This option controls the maximum number of results presented to the user. When the value of this option is set to true, it overrides any setting established by largeResultSize and computes the number of search results to display based on the width of the division holding the video search control.

• Custom String » string_allDone : "____"

Whenever a user clicks on the thumbnail, the video player is displayed with the phrase "i'm done watching this" at the top, which also works as display text for a link that closes the player and folds away the division holding the player.

The text can be changed to any text string of your choice using the option string_allDone : "____", the dash taking the text you want to appear in place of i'm done watching this.

• Startup Delay » startupDelay : 1000

The startup delay option defers the initial search and other startup activity. You can select a value between 50ms and 2s.

This option is really designed for pages that have a log of startup activity and this allows you to defer activity created by this control. Only use this option if your page really needs it.

• Query Tags

{ query : "winter olympics", label : "Olympics" }.

Query Tags are search keywords. Each tag contains both a search expression (value of query : ) as well as an optional display term (value of label : ). This array is required and supplies a default list of search expressions.

The display terms are listed below the video thumbnails. Where the display term is not mentioned, the search expression itself is used as the display term.

Move To  

Multiple Video Search Controls on a Page  
 
2 Video Search Controls
<script type="text/javascript">
function LoadVideoSearch() 
{
   var defaultTags = [
     { query : "big wave surfing", label : "surfing" },
     { query : "panda bear" },
     { query : "adnan sami", label : "adnan" }
      ];
   var options = {
     twoRowMode : true
     };
   new GSvideoSearchControl(
		document.getElementById("videoSearch1"),
		defaultTags, 
		null, 
		null, 
		options
		);
   
   var vsrch2;
   defaultTags = [
     { query : "winter olympics", label : "Olympics" },
     { query : "michael jordan", label : "Basketball" }
      ];
   options = {
     largeResultSet : true 
     };
   vsrch2 = new GSvideoSearchControl(
		document.getElementById("videoSearch2"),
		defaultTags, 
		null, 
		null, 
		options
		);
}
GSearch.setOnLoadCallback(LoadVideoSearch);
</script>
In inserting multiple video search controls on a page would need you to repeat step 3 and step 2 for each video search control to be displayed. In any case, we need to think of only step 2 and step 3 for including the second and subsequent video search controls.

The divisions relating to each search control should be placed wherever you think them to be fit.

First <div id="videoSearch1">Loading...</div>
Second <div id="videoSearch2">Loading...</div>

Player Size  
 
These dimensions are controlled using 
<style type="text/css">...
...
.playerInnerBox_gsvb .player_gsvb {
  width : 320px;
  height : 260px;
}
...
...
</stle>
The size of the video player can be varied using appropriate CSS style properties which would override the default settings in the file "gsvideosearch.css". The default player size is 260px wide by 195px tall. All the CSS style properties for refining the format of the video thumbnails , videoplayer, the division holding them can be placed within the same style element.
  • A 1.33 aspect ratio works best.
  • For widths > 300px, the player works best with an additional 20px in height.
  • Some standard dimensions in use
    1. 180px x 135px - small player
    2. 260px x 95px - medium player
    3. 320px x 260px - large player
    4. 480px x 380px - extra large player

Move To  

Formatting » Form, Video Thumbnails, Text above/below the player  
 
The box holding the thumbnails displaying the video within the video bar, the text displayed above the video player and the text displayed below the video player can be formatted using the CSS style properties which would override the default settings in the file "gsvideosearch.css".

  • .app_gsvsc {color : #0000cc;}

    The total container holding the search result and the form. This is inner to the html element (division) used for the same.

  • .footerBox_gsvsc a {color : #7777cc;}

    The text link below the search results, linking to the google_video/youtube pages.

  • .playerBox_gsvsc a.title_gsvsc {color : #7777cc; }

    The title of the video being played displayed as a link below the player

  • div.more_gsvsc:hover {color : #0000cc; }

    The text above the video being played which works as a link to shutdown the video player.

  • div.tag-selected_gsvsc { color : #000000;}

    The tag (out of the tags displayed below the video thumbnails) relating to the content in display. If the content is related to a search result, then none of the tags looks selected.

  • .searchForm_gsvsc {color : #676767; }

    The form holding the search box and the submit button

  • .results_gsvsc div.video-result_gsvsc {border-color : #0000cc;}

    The video thumbnails

  • .search-form-complete_gsvsc div.search-form-save_gsvsc { color : #0000cc;}

  • div.search-form-save_gsvsc {color : #e0e0e0; }

  • div.edit-tag_gsvsc {color : #7777cc; }

  • div.tag-control_gsvsc:hover {color : #7777cc; }

  • div.tag-control_gsvsc {color : #676767; }

  • .searchForm_gsvsc input.gsc-input {color : #676767; }

  • .search-form-input_gsvsc {color : #676767; }

  • div.edit-form-submit-box_gsvsc {color : #676767; }

Any of the style properties that are capable of being used for the relevant element can be used.

Changing Video Search Results using Links  
 
The initial display of search results is dependent on the query strings assigned to defaultTags. The strings would be displayed below the search results and a reader/user may click on the link to refresh the search results based on the query behind the label being clicked on.

The video search results can also be changed by using the search box above the thumbnails in display. The video thumbnails of the videos relating to the search terms used would be displayed.

  • <a href="javascript:vsrch.execute('criket tests');">Cricket</a>
  • <span onclick="javascript:vsrch.execute('adventure forest');">Adventure Forests</span>
  • <span onmouseover="javascript:vsrch.execute('kids fun');">Kids Fun</span> 
<script type="text/javascript">
var vsrchone;
function LoadVideoBar() 
{
   var vsrchmain;
   ...
   ...
}
  ...
</script>

The link can be created using the anchor tag or any other element using the html event attributes onclick, onmouseover, etc.

In vsrch.execute('kids fun'), vsrch is the variable name that holds the video bar object created. The variable should have been declared as a global variable to be accessible using such a link.

In the example given to the right, the variable vsrchmain is declared within the function and is thus local to that function. It can only be accessed from within the function. The variable vsrchone is declared outside the function (all functions) and is thus accessible from anywhere.

Move To  

Save & Load Search Expressions  
 
Where you do not use the save and load functions for videosearch the strings used by the user for searching in a particular session would not be recorded

Want to Know More!!  
 

• About the Tech behind the Videosearch

If you have understood the functioning of the product "videosearch" and if you are proficient in javascript, viewing the javascript code that has been used for the product would be useful in getting an understanding of the tech behind the product.

You can access a copy of the code using the url within the html element used for inserting the code. gsearch: uds.js and VideoSearch: gsvideosearch.js

• Formatting

If you are proficient with CSS properties and have the patience and interest to experiment, you can get greater details from this file which is the CSS file linked to videosearch and you may also get some idea from the CSS file linked to the googlesearch.
Author Credit : The Edifier  

Move To  

♣ Copyright � Krishbhavara. All rights reserved
♣ Site optimized for Internet Explorer 5.5 and above