Google Video Search Widget

Based on the Google AJAX Search API, Google released a video search widget called GSvideoSearch Solution, that is designed to let you easily add video seavh and playback capabilities to your pages, sites, and blogs. The solution is designed for extreme easy of use. As a site designer you are able to control the initial […]

Based on the Google AJAX Search API, Google released a video search widget called GSvideoSearch Solution, that is designed to let you easily add video seavh and playback capabilities to your pages, sites, and blogs.

The solution is designed for extreme easy of use. As a site designer you are able to control the initial set of tagged searches, how many search results appear for each search, as well as editability of the tagged searches.

Instructions for adding this to your site

Adding the solution is a simple three step process.

Step 1 - Load AJAX Search API and Video Search Solution

The first step is to load the Google AJAX Search API and the Video Search solution and style sheet into your application. If you don't already have a Google AJAX Search API key, your first step is to sign up for a key. With your key in hand, add the following three lines of code to your page or blog template. <script src="http://www.google.com/uds/api?file=uds.js&v=0.1&key=YOUR-KEY" type="text/javascript"></script> <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"/>

Step 2 - Define a location on your page for the Video Search Control

The next step is to define a place on your page for the search control (note: you can have more than one). This is typically done by defining a named <div> element as we have shown below:

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

You might want to set some styling attributes on this element to constrain the width of the control, set a border or margin, etc. For example, a style rule like this might be useful.

#videosc { width : 300px; margin-left: 10px; padding: 4px; border : 1px solid #f9f9f9; }

Step 3 - Create a GSvideoSearchControl and bind it to your page

The final step involves creating and configuring the control. The control is very powerful and offers several options. In this section, we will describe the simplest case of adding a control to a read-only page or blog followed by a more complex page, one that allows your users to save searches, edit tags, etc.

The first step is to actually get your code to run. The easiest way to do this is to either extend an existing body onload handler, or create a new one. Find the <body> element on your page and add an onload handler.

<body onload="OnLoad()">

Now write your onload handler by adding some code to an existing <script> block, or by creating a new one. Find the <body> element on your page and add an onload handler. The code snippet below demonstrates how to create a new video search control thats will appear on your page inside the element named "videosc" and will use the JavaScript array defaultTags is the initial set of searches. If you want a different set of initial searches just edit the array. The value of the query property is what you will be searching for, and the value of the optional label property is what will be displayed in the list of tagged searches. Be careful with trailing comma's at the end of your array or after a label property as some browsers are less tolerant of this error than others.

<script type="text/javascript"> function OnLoad() {// establish default tags var defaultTags = [ { query : "paris hilton" }, { query : "mtv" }, { query : "jessica simpson", label : "jessica" }, { query : "vw gti" } ];// create a new GSvideoSearchControl new GSvideoSearchControl( document.getElementById("videosc"), // container defaultTags, // default tag array null, // optional load function null, // optional save function null // options );} </script>

For more advanced users, the control allows you to provide a function that the control will call to load and save its set of tags as well as an optional set of options which allow you to configure the control. The current set of options allows you to select either a small set of video search results(4), or a large set of video search results(8). In addition, you can specify a programmable delay time of between 50ms and 2s before the control will perform its initial starting search. If you have a lot of things going on in your page load, this is a helpful way of controlling some of the startup activity.

The following code fragment demonstrates how to configure the search control for a large set of video search results and a 100ms startup delay. Note: If you don't need to use an option, then leave it out of the option object and the system default value will be used. And definitely be careful about trailing comma's.

<script type="text/javascript"> function OnLoad() {var options = { largeResultSet : true, // valid values are true or false startupDelay : 100 // valid values are 50 - 2000 }// create a new GSvideoSearchControl new GSvideoSearchControl( document.getElementById("videosc"), // container defaultTags, // default tag array null, // optional load function null, // optional save function options // options ); } </script>