Google Video Search API (Deprecated)

Google Video Search Developer's Guide

Table of Contents

  1. Introduction
    1. Browser compatibility
    2. Audience
    3. The "Hello World" of Image Search
  2. Getting started
    1. Load the JavaScript API and search module
  3. Building a basic application
    1. Execute a search
    2. Call the search completion handler
    3. Register a handler for intialization
    4. Create a "Powered by Google" DOM node
    1. Handle search results
      1. Result properties
      2. Result styling
  1. Configuring optional methods
    1. Set an additional query term
    2. Order search results by date
    3. Specify the size of the result set
    4. Return the current result set size
    5. Create or regenerate the .html property
    6. Clear the current search results
    7. Prevent the searcher from generating the .html property
    8. Request additional search parameters
    9. Request a specific results page
    10. Create an array of search results
  2. Troubleshooting

Introduction

This developer's guide provides a basic model for using the Google Video Search API, along with granular explanations of the API's configurable JavaScript components. You can use this guide to configure Video Search on your page.

Browser compatibility

The Google Video Search API currently supports Firefox 1.5+, IE6+, Safari, Opera 9+, and Chrome.

Audience

This documentation is intended for developers who wish to add Google Video Search functionality to their pages using the Video Search API.

The "Hello World" of Video Search

The following example creates an instance of Video Search on your page. This Video Search instance is controlled by a text input field and clear button to clear search results after a search.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Search API Sample</title>
    <script src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // This code generates a "Raw Searcher" to handle search queries. The Raw Searcher requires
      // you to handle and draw the search results manually.
      google.load('search', '1');

      var videoSearch;
        function searchComplete() {

          // Check that we got results
          document.getElementById('content').innerHTML = '';
          if (videoSearch.results && videoSearch.results.length > 0) {
            for (var i = 0; i < videoSearch.results.length; i++) {

              // Create HTML elements for search results
              var p = document.createElement('p');
              var a = document.createElement('a');
              a.href="/video-search/v1/videoSearch.results[i].url;"
              a.innerHTML = videoSearch.results[i].title;

              // Append search results to the HTML nodes
              p.appendChild(a);
              document.body.appendChild(p);
            }
          }
        }

      function onLoad() {
        // Create a VideoSearch instance.
        videoSearch = new google.search.VideoSearch();

        // Set searchComplete as the callback function when a search is complete.  The
        // videoSearch object will have results in it.
        videoSearch.setSearchCompleteCallback(this, searchComplete, null);

        // Specify search quer(ies)
        videoSearch.execute('1974 Chevrolet Caprice');

        // Include the required Google branding
        google.search.Search.getBranding('branding');
      }

      // Set a callback to call your code when the page loads
      google.setOnLoadCallback(onLoad);

    </script>

  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="branding"  style="float: left;"></div><br />
    <div id="content">Loading...</div>
  </body>
</html>

Getting started

Load the JavaScript API and search module

To begin using the Video Search API, include the following script in the header of your web page.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

Next, load the Google search module with google.load(module, version), where:

  • module calls the specific API module you wish to use on your page (in this case, search).
  • version is the version number of the module you wish to load (in this case, 1).
<script type="text/javascript">
  google.load("search", "1");
</script>

You can find out more about google.load in the Google Loader developer's guide.

When we do a significant update to the API, we will increase the version number and post a notice on the Search API discussion group. Take note of any required code changes when this occurs, and update your URLs to the new version when they are compliant.

The Google API team will also periodically update the API with recent bug fixes and performance enhancements without requiring a version update. For the most part, these fixes should remain transparent to you, but we may inadvertently break some API clients. Please use the Search API discussion group to report such issues.

Building a basic application

The google.search.VideoSearch constructor initializes the Video Search service so you can execute Video Search queries and display results. The methods and properties described below apply to all objects that inherit from this base class. Each of those objects may supply additional interfaces as well.

Execute a search

.execute(query) initiates a new search, where query supplies the search term(s). This method populates the object with the corresponding set of results, and calls the registered .setSearchCompleteCallback handler.

In addition to standard queries, the Video Search API allows you to call specific query predicates corresponding to YouTube channels and special feeds. These predicates are as follows:

  • ytchannel:name-of-channel expression? returns video results only from the specified channel. For example, a search expression of ytchannel:BarackObamadotcom returns a collection of videos from the BarackObamadotcom YouTube channel. To perform a specific keyword search within a channel, specify the (optional) query right after the ytchannel directive. For example, to search for the query "oil" within the Barack Obama channel, specify videoSearch.execute("ytchannel:BarackObamadotcom oil").
  • ytfeed: has one of three possible values: For any of these values, you can specify a time period using the .this_week, .this_month, or .all_time qualifiers. For example, to scope results to the most-viewed "news" videos from the current week, specify videoSearch.execute("ytfeed:most_viewed.this_week news").

.execute() has no return value.

Call the search completion handler

.setSearchCompleteCallback(object, method, opt_arguments?) registers an object and method to notify when a search completes, where:

  • object supplies an application-level object that defines the context in which to call the specified method.
  • method supplies the search completion handler function, which checks for results and appends them to HTML nodes.
  • opt_arguments allows you to optionally pass in a list of arguments, in order, to the specified method. If you choose to use opt_arguments, you must pass in a list (null is also acceptable).

    For example, if you call this method as videoSearch.setSearchCompleteCallback(handler, handler.method, [[1, 2, 3]);, then you execute handler.method(1, 2, 3); when the search completes.

In this API, the calls are asynchronous. Therefore, you can't block on the return and then use the results. Rather, you have to use a callback, which will execute a method upon the return of the results.

.setSearchCompleteCallback() has no return value.

Register a handler for intialization

.setOnLoadCallback(callback) is a static function that registers the specified handler function to be called once the page containing this call loads, where callback is a required function called when the containing document is loaded and the API is ready for use (e.g., after onLoad). This function is implemented on the google namespace (i.e., google.setOnLoadCallback(callback);)

.setOnLoadCallback() has no return value.

Note: Previous documentation recommended that you use the body element's onload attribute (<body onload="OnLoad()">). While this is a fine way to go when you are in complete control of the page and all code loaded by the page, this approach can cause problems with some runtimes that destroy your body.onload handler. setOnLoadCallback() does not have these problems, and therefore is the recommended method of registering a callback that calls your code when the API is fully loaded and ready for use.

Add Google branding

.getBranding(opt_element?, opt_orientation?) is a static helper function that returns a "powered by Google" HTML DOM branding node to your application, and optionally attaches it to your document as the only child of the specified optional element. The purpose of this method is to ensure that your application has a simple way to comply with branding requirements.

The branding node, by default, is designed for a horizontal orientation and works well underneath a search form, above or below a collection of results, etc.

  • opt_element is an optional argument which, if supplied, specifies the HTML DOM node that will be populated with a "powered by Google" branding element.
  • opt_orientation - an optional argument which, if supplied, specifies the orientation of the branding node. Valid values include:
    • google.search.Search.HORIZONTAL_BRANDING requests horizontal orientation. This is the default behavior.
    • google.search.Search.VERTICAL_BRANDING requests vertical orientation.

.getBranding() returns a "powered by Google" HTML DOM node that you can attach or clone onto your document.

You must call .getBranding() on google.search.Search, not on google.search.VideoSearch.

Warning! This API requires displaying attribution near any API input boxes and the display of results, indicating that it is "Powered by Google". If you choose not to use .getBranding(), you are obligated to provide this branding yourself.

Handling search results

Result objects are produced using a JSON encoding of server search requests. Consequently, we have chosen not to implement formal JavaScript objects, and instead dynamically create these objects from their serialized form.

While there is no formal implementation of the objects, they exist, and we document them as if there was a backing JavaScript implementation. The impact of all this is minimal. All that it means is that there is no named constructor. For each result, it's as if the system called new Object() and then set formal properties on that object. These properties are documented below.

Important note: Maximum number of search results

The Google Video Search API allows a maximum of 64 results on 8 pages. There is no way to get more than 64 results.

Result properties

Here are the basic properties allowing you to handle results from the Video Search API.

Property Description

author

If present, supplies the YouTube username of the video's author.

content

Supplies a brief description of the video clip.

cursor

.cursor is an optional property that is present once a search completes successfully. When present, the property specifies how an application can request additional search results for the current query term, the estimated result count, the current page, and the URL for a search results page. The property has the following structure:

  • pages[] supplies an array used by start in order to iterate through all available results. Each entry in the array is an object with the following structure:
    • start supplies the value that will be used in the &start URL argument to request a bundle of results
    • label supplies a text label associated with the entry (for example, "1", "2", "3", or "4")
  • estimatedResultCount supplies the estimated number of results that match the current query. This value will not necessarily match the similar value that is visible on the Google.com search properties.
  • currentPageIndex supplies the index into the pages array of the current set of results.
  • moreResultsUrl supplies a URL to a Google-hosted search page that contains additional search results.

Note: The Video Searcher supports a maximum of 8 result pages. When combined with subsequent requests, a maximum total of 64 results are available. It is not possible to request more than 64 results.

duration

The approximate duration of the video, in seconds.

GsearchResultClass

Indicates the type of result (for example, google.search.VideoSearch.RESULT_CLASS indicates GvideoResult).

html

Supplies the root of an HTML element that may be cloned and attached somewhere into the application's DOM hierarchy. We expect that this is the primary property that applications will use, typically by cloning this node and attaching it to the DOM hierarchy.

We expect applications to control styling, as well as which elements are displayed, using CSS. For instance, we expect the following fragment to be common across all applications that wish to copy and paste search results delivered through the Video Search API.

// clone the .html node from the result
var node = result.html.cloneNode(true);

// attach the node into my dom
container.appendChild(node);
playUrl

If present, supplies the URL of the Flash version of the video, which you can play inline on your page. To play this video, simply create an <embed> element on your page using this value as the src attribute and using application/x-shockwave-flash as the type attribute. If you want the video to play right away, append &autoPlay=true to the URL.

published

Supplies the published date of the video (rfc-822 format).

publisher

Supplies the name of the video's publisher, typically displayed in green below the video thumbnail, similar to the treatment used for visibleUrl in other search result objects.

rating

If present, this property supplies the rating of the video on a scale of 1 to 5.

results[]

.results[] contains an array of search result objects, one for each result. Each time a search executes, this property is cleared, and each time a search completes, the array is populated. If there are no results to report, the .length property of this array will be set to 0. Therefore, results will never be null, and you can always safely check for results.length == 0.

  • The GvideoResult object is produced by google.search.VideoSearch. It is available in that object's .results[] array.
  • This object is indicated by a .GsearchResultClass value of google.search.VideoSearch.RESULT_CLASS.

tbHeight

Supplies the height of the video thumbnail, in pixels.

tbUrl

Supplies the URL of a thumbnail image that visually represents the video.

tbWidth

Supplies the width of the video thumbnail, in pixels.

title

Supplies the title of the video result.

titleNoFormatting

Supplies the page title associated with the search result, but unlike .title, this property is stripped of HTML markup (e.g., <b>, <i>, etc.).

url

Supplies the URL of a playable version of the video result.

viewCount

If present, this property supplies a count of the number of plays for this video.

Result styling

The .html property discussed above is built with CSS styling in mind. As a result, each piece of semantic information is enclosed in HTML markup with an appropriate set of class markers. This allows you to use this HTML in conjunction with your own custom CSS rules that style the HTML to meet your needs.

The following fragment of HTML illustrates the structure of a Video Search result's .html property. The purpose of this skeleton is to show you the major structural components work, so that you can alter the styling and display of a result. For instance, if you want to suppress the "snippet", a CSS rule of #mysearcher .gs-videoResult .gs-snippet { display : none; } would do the trick.

Each search result is enclosed in a div element marked with a generic search result class of gs-result, as well as a class specific to the result type (e.g., gs-videoResult). This structure allows you to easily define generic CSS rules that are applied to all results, as well as type-specific rules.

<div class="gs-result gs-videoResult">
  <table>
    <tr>
      <!-- The Result's Thumbnail image is sitting in this column -->
      <td class="gs-image-box">
        <div class="gs-image-box">
          <a class="gs-image">
            <img class="gs-image"></img>
          </a>
        </div>
      </td>
      <!-- The Result's Text based result data is sitting in this column -->
      <td class="gs-text-box">
        <div class="gs-text-box">
          <!-- Note, a.gs-title can have embedded HTML
          // so make sure to account for this in your rules.
          // For instance, to change the title color to red,
          // use a rule like this:
          // a.gs-title, a.gs-title * { color : red; }
          -->
          <div class="gs-title">
            <a class="gs-title"></a>
          </div>
          <div class="gs-snippet"></div>
          <div class="gs-publishedDate"></div>
          <div class="gs-publisher">
            <a class="gs-publisher"></a>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

Configuring optional methods

Set an additional query term

.setQueryAddition(term) sets (or clears) an optional, additional query term that is appended to all queries flowing through the searcher, where term supplies the additional term. Applications typically use this API to provide alternative results with mild variations from the original search term.

To clear an existing query addition, call either .setQueryAddition(null) or .setQueryAddition('').

.setQueryAddition() has no return value.

Order search results by date

.setResultOrder(orderBy) changes the order of search results, where orderBy has two possible values:

  • google.search.Search.ORDER_BY_RELEVANCE indicates that results should be returned in order of their relevance to the search term(s). This is the default behavior.
  • google.search.Search.ORDER_BY_DATE indicates that results should be returned in order of publication date.

.setResultOrder() has no return value.

Specify the size of the result set

.setResultSetSize(num) specifies the size of the result set, where num supplies the number of results to display per page, from 1-8.

.setResultSetSize() has no return value.

Return the current result set size

.getResultSetSize() has no arguments and returns an integer from 1–8 indicating the current result set size (which is established by .setResultSetSize(). It allows you to determine the result set size returned by the search.

Create or regenerate the .html property

.createResultHtml(result) allows the caller to either create or re-generate the .html property of the specified result, where result supplies a result object.

If the result has no .html property, this call creates one. One circumstance requiring you to create an .html property is if the caller had previously used .setNoHtmlGeneration().

.createResultHtml() has no return value.

Clear the current search results

.clearResults() resets the searcher, clearing all of the results of the previous search. This method is implicitly called prior to executing a new search.

.clearResults() has no arguments and no return value.

Prevent the searcher from generating the .html property

.setNoHtmlGeneration() stops your application from generating an .html property, leaving you with only the raw properties valid in a result. This property is useful for optimizing your application, if you want to handle rendering of the results yourself.

.setNoHtmlGeneration() has no arguments and no return value.

Request additional search parameters

.cursor is an optional property that is present once a search completes successfully. When present, the property specifies how an application can request additional search results for the current query term, the estimated result count, the current page, and the URL for a search results page. The property has the following structure:

  • pages[] supplies an array used by start in order to iterate through all available results. Each entry in the array is an object with the following structure:
    • start supplies the value that will be used in the &start URL argument to request a bundle of results
    • label supplies a text label associated with the entry (for example, "1", "2", "3", or "4")
  • estimatedResultCount supplies the estimated number of results that match the current query. This value will not necessarily match the similar value that is visible on the Google.com search properties.
  • currentPageIndex supplies the index into the pages array of the current set of results.
  • moreResultsUrl supplies a URL to a Google-hosted search page that contains additional search results.

Note: The Video Searcher supports a maximum of 8 result pages. When combined with subsequent requests, a maximum total of 64 results are available. It is not possible to request more than 64 results.

Request a specific results page

.gotoPage(page) requests a specific page of search results after an initial search completes, where page supplies the page number of the results that the application wants. Numbering of results pages begins at 0, and the searcher returns the first page by default.

If you specify a page number that is out of range, or if the underlying searcher has no .cursor property, no operation is performed.

.gotoPage() has no return value.

Create an array of search results

.results[] contains an array of search result objects, one for each result. Each time a search executes, this property is cleared, and each time a search completes, the array is populated. If there are no results to report, the .length property of this array will be set to 0. Therefore, results will never be null, and you can always safely check for results.length == 0.

  • The GvideoResult object is produced by google.search.VideoSearch. It is available in that object's .results[] array.
  • This object is indicated by a .GsearchResultClass value of google.search.VideoSearch.RESULT_CLASS.

Troubleshooting

If you encounter problems with your code:

  • Look for typos. Remember that JavaScript is a case-sensitive language.
  • Use a JavaScript debugger. Google Chrome has a full set of developer tools. In Firefox, you can use the JavaScript console or the Firebug. In IE, you can use the Microsoft Script Debugger.
  • Search the discussion group. If you can't find a post that answers your question, post your question to the group along with a link to a web page that demonstrates the problem.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.