diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)

Aug302006

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



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:


Loading...

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.



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.


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.



Share This Story, Choose Your Platform!