Google AJAX Search API » Video Bar

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

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 Video Bar Code (including a key for your blog/website)  
 
  • Move to the Wizard page http://www.google.com/uds/solutions/wizards/videobar.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 Bar/Player

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 bar 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 Bar  
 

» In any Web Page

You can place the bar and the player 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="videoBar-player">
      ...
</div> 		Division displaying the bar
<div id="videoBar-bar">
      ...
</div>

Place the html code relevant to division displaying the bar/player 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 bar to appear.

Greater Customization of the Video Bar/Player

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 Bar Script  
 

• 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/videobar/gsvideobar.js"
    type="text/javascript"></script>
<link href="http://www.google.com/uds/solutions/videobar/gsvideobar.css"
    rel="stylesheet" type="text/css"/>
The first step in the process of generating and displaying the video bar 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 bar and player to appear.

• 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 relating to the API.

    Insert the key related to the web-site/blog on which you intend to use this code, as the value of the attribute key.

  • <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/videobar/gsvideobar.js" type="text/javascript"></script>

    This piece of code will load the javascript file that contains the code for creating the video bar.

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

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

Positioning the Divisions displaying the Video Bar & the Video Player  
 

• STEP 2

<div id="videoBar">Loading...</div>
<div id="videoPlayer">Loading...</div>
Position the divisions that would hold the video bar and the video player wherever you want within the web page. They need not be side by side.
  • <div id="videoBar">Loading...</div>

    This division displays the videobar.

  • <div id="videoPlayer">Loading...</div>

    The video player is displayed within this division.

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

• Where to place them?

There may be situations where you display two or more video bars. In such cases you may use the same player to play the videos from both the bars.

Formatting the Divisions displaying the Video Bar & the Video Player  
  
<style type="text/css">
    #videoBar {
      width : 160px;
      margin-right: 5px;
      margin-left: 5px;
      padding-top : 4px;
      padding-right : 4px;
      padding-left : 4px;
      padding-bottom : 0px;
    }
</style>
The four files that are included in the web page contain the css files that contain definitions for formatting the video bar as well as the video player. 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 videoBar 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 Bar Control  
  
<script type="text/javascript">
function LoadVideoBar() 
{
   var vbr;
   var options = { 
                largeResultSet : true, 
                horizontal : true 
                }
   vbr = new GSvideoBar(
                document.getElementById("videoBar"),
                document.getElementById("videoPlayer"),
                options
                );
   vbr.execute("VW GTI");
}
GSearch.setOnLoadCallback(LoadVideoBar);
</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 dont 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 LoadVideoBar() and cause the code within it to get executed.

• LoadVideoBar() execution

The execution of the function LoadVideoBar() will result in
  • Declaration of a variable which is subsequently used to hold the videobar object.
  • Declaration of another variable with the name "options" assignment of the values which represent the various options with which the video bar is initialized. Multiple values assigned are to be separated by commas.
  • The function GSvideoBar() is called to create the video bar object. The Id of the division that would hold the video bar, The Id of the division that would hold the video player, and the options are passed on to the function as arguments.

    The object created is assigned to the variable created at the beginning.

  • The execute method within the videobar object created is called passing on as arguments the keywords relating to the videos to be fetched.

    This results in the video bar being populated with the relevant video thumbnails fetched from the google server.

Video Bar Options  
 
There are a number of options that can be chosen for the video bar. In the example above, 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, 
                horizontal : true 
                }
   ...
   ...

The available options are

• Orientation [Horizontal/Vertical] » horizontal : true

By default the video bar is oriented along the vertical. To make the video bar orient itself along the horizontal, use the argument horizontal : true.

This may be set to be false or completely ignored to obtain a vertically oriented video bar. Multiple options are separated by commas.

• Number of Video Thumbnail in a Bar » largeResultSet : true

By default the video bar is set to display upto 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 video bar to display the fewer number of video thumbnails.

• Thumbnail Size » thumbnailSize : GSvideoBar.THUMBNAILS_SMALL

By default the video bar is set to display medium sized video thumbnails which are about 100px x 75px size. Small sized thumbnails which are approximately half the size of the medium thumbnails can be displayed using the option thumbnailSize : GSvideoBar.THUMBNAILS_SMALL.

To display medium sized thumbnails, either ignore the option or use the option
thumbnailSize : GSvideoBar.THUMBNAILS_MEDIUM

• 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.

• Auto Execute Lists »

Video Bar content can be refreshed with content relevant to the video search expressions within a list. The two parameters forming this option are an array of expressions forming the list and the cycle timer. 

...
   ...
   var options = { 
                largeResultSet : true, 
                horizontal : true,
                autoExecuteList : {
                     cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
                     cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
                     statusRoot : document.getElementById("VideoBarStatus"),
                     executeList : [ "cartoons", "kids", "fun", "computers", "games" ]
                   }
              }
   ...
   ...

» Execute List Property

The execute list is an array of search expression strings.
executeList : [ "cartoons", "kids", "fun", "computers", "games" ].

Please avoid using a comma after the last expression in the array as the code may not function properly in IE with a trailing comma.

» Cycle Time Property

cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM

The autoExecuteList.cycleTime defines the time between refreshes. At the end of each cycle, a new Video Search is performed from your list, and the cycle timer resets. The values may be
GSvideoBar.CYCLE_TIME_SHORT10s
GSvideoBar.CYCLE_TIME_MEDIUM15s
GSvideoBar.CYCLE_TIME_LONG30s

Where no mention is made of this property, the default value assumed is SHORT (10 seconds).

» Cycle Mode Property

GSvideoBar.CYCLE_MODE_LINEAR

This property is used to set the cycle mode to either random or sequential.

GSvideoBar.CYCLE_MODE_LINEARSequential Mode
GSvideoBar.CYCLE_MODE_RANDOMRandom Mode

Where no mention is made of this property, the default value assumed is LINEAR (sequential mode). The list is considered sequentially from the left to the right.

» Status Root Property

statusRoot : document.getElementById("VideoBarStatus")

This property allows you to specify a location on the web page as a "status" area by placing the relevant code within the options and placing a division with the same ID on your web page where you want the list to be displayed.

<div id="videoBarStatus">Loading...</div>

The text Loading... is the text displayed in the division till it is filled with the content.

The video bar will populate this area with the current contents of your auto execute list. The web page readers can click on links to manually switch the contents of the video bar.

• Simplified Code

Where the auto execute list is used, the code for creating the videobar can be further simplified.

The execute method within the videobar object need not be called to initialize the video bar. Thus, declaring a variable and assigning the videobar object to the variable is not needed. 

<script type="text/javascript">
function LoadVideoBar() 
{
   var options = { 
                autoExecuteList : {
                     executeList : [ "cartoons", "kids", "fun", "computers", "games" ]
                }
    new GSvideoBar(
                document.getElementById("videoBar"),
                document.getElementById("videoPlayer"),
                options
                );
}
GSearch.setOnLoadCallback(LoadVideoBar);
</script>

You have to name the videobar object if you intend to access it subsequently and change the content displayed in the video bar at the choice of the user. [Refer to this section below: Changing the video bar content using links]

Move To  

Multiple Video Bars on a Page  
 
2 Video Bars each with a player of its own
<script type="text/javascript">
function LoadVideoBar() 
{
   var vbarmain;
   var options = { 
                largeResultSet :true, 
                horizontal : true 
                }
   vbarmain = new GSvideoBar(
                document.getElementById("videoBar"),
                document.getElementById("videoPlayer"),
                options
                );
   vbarmain.execute("cartoons");

   var vbarone;
   options = { 
                largeResultSet : false, 
                horizontal : true, 
                GSvideoBar.CYCLE_TIME_LONG
                }
   vbarone = new GSvideoBar(
                document.getElementById("videoBar1"),
                document.getElementById("videoPlayer1"),
                options
                );
   vbarone.execute("machines");
}
GSearch.setOnLoadCallback(LoadVideoBar);
</script>
In inserting multiple video bars on a page, we need to decide on whether or not we intend to use the same player for all the bars. In any case, we need to think of only step 2 and step 3 for including the second and subsequent video bars.

• Using Separate Players for Each Bar

If you intend to use separate players for each bar, then the process would be repeating step 3 and step 2 for each video bar to be displayed.

The divisions relating to each video bar and the players should be placed wherever you think them to be fit.

First <div id="videoBar">Loading...</div>
<div id="videoPlayer">Loading...</div>
Second <div id="videoBar1">Loading...</div>
<div id="videoPlayer1">Loading...</div>
Third <div id="videoBar2">Loading...</div>
<div id="videoPlayer2">Loading...</div>

• The Same Players for one or more Video Bars

If you intend to use the same player for two or more bars, then a player is defined for one of the video bars in whose case, the steps would be the same as in the case of a video bar with its own player.

The code for the videobar that is set to use the player relating to another videobar needs to be modified to indicate the same.

The video bar itself would have a division of its own and the division that holds the player is not present in such a case


Third Video Bar using the player of the second
<script type="text/javascript">
function LoadVideoBar() 
{
   ...
   ...
   vbarone.execute("machines");

   var vbartwo;
   options = { 
                horizontal : true, 
                master : vbarone,
                GSvideoBar.CYCLE_TIME_MEDIUM,
                }
   vbartwo = new GSvideoBar(
                document.getElementById("videoBar2"),
                null,
                options
                );
   vbartwo.execute("science");
}
  ...
</script>

» Options to indicate the player to use

master : vbarone

This indicates that the current video bar is set to use the video player relating to the video bar with the videobar object name vbarone.

» null Argument passed for Player

In calling the function to create the videobar object, the second argument passing the data relating to the division to hold the video player is set to NULL 
GSvideoBar(
         document.getElementById("videoBar2"), 
         null, 
         options
     );

This indicates that the current video bar has no player of its own.

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 "gsvideobar.css". The default player size is 260px wide by 195px tall. All the CSS style properties for refining the format of the videobar, videoplayer, the divisions holding the videobar and the videoplayer 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 » Videobar, Text above and 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 "gsvideobar.css".

The text displayed above the video player .playerBox_gsvb div.alldone_gsvb {color:#676767;}
.playerBox_gsvb div.alldone_gsvb:hover {color:rgb(237, 92, 11);}
Text displayed below the video player .playerBox_gsvb a.title_gsvb {color : #676767;}
.playerBox_gsvb a.title_gsvb:hover {color:rgb(237, 92, 11);}
Thumbnail boxes .resultsBox_gsvb div.resultDiv_gsvb {border-color:#676767;}

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

Changing Video Bar Content using Links  
 
The videos displayed listed within the video bar for the first time are dependent on the keywords used while creating the videobar object. Subsequently, the content can be changed by calling the objects execute method and passing on the new keywords as argument.
  • <a href="javascript:vbr.execute('criket tests');">Cricket</a>
  • <span onclick="javascript:vbr.execute('adventure forest');">Adventure Forests</span>
  • <span onmouseover="javascript:vbr.execute('kids fun');">Kids Fun</span> 
<script type="text/javascript">
var vbarone;
function LoadVideoBar() 
{
   var vbarmain;
   ...
   ...
}
  ...
</script>

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

In vbr.execute('kids fun'), vbr 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 vbarmain is declared within the function and is thus local to that function. It can only be accessed from within the function. The variable vbarone is declared outside the function (all functions) and is thus accessible from anywhere.

Want to Know More!!  
 

• About the Tech behind the Videobar

If you have understood the functioning of the product "videobar" 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 VideoBar: gsvideobar.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 videobar 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