動画検索API

Google Video Search APIは2011/5/26から非推奨となり、以降は1日あたりのリクエスト数が制限されます。Google Video Search API (Deprecated) | Google Developers

動画検索 (VideoSearch)

動画ファイルのURLなどの情報を取得して、描画は自前で行います。

実行例

キーワードを変更して検索すると、下の動画情報も更新します。

動画情報 (GvideoResultオブジェクト)
Name Value
title  
titleNoFormatting  
content  
url  
published  
publisher  
duration  
tbWidth  
tbHeight  
tbUrl  
playUrl  
author  
viewCount  
rating  
サムネイル
default.jpg 1.jpg 2.jpg 3.jpg
       

取得される情報の意味は、Result propertiesにあります。

サンプルコード

<!-- Google AJAX API ローダーのライブラリをインクルードする -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

  function SearchComplete( searcher )
  {
      // 結果オブジェクトを取得する
      var results = searcher.results;

      if( results && ( 0 < results.length ) )
      {
          var content = document.getElementById( 'content' );

          for( var i = 0; i < results.length; i++ )
          {
              var player = document.createElement( 'embed' );

              player.type = 'application/x-shockwave-flash'; // MIMEタイプ
              player.src = results[ i ].playUrl;             // 動画のURL

              content.appendChild( player );
          }
      }
  }

  function OnLoad()
  {
      var videoSearch = new google.search.VideoSearch();

      // 検索完了時に呼び出されるコールバック関数を登録する
      videoSearch.setSearchCompleteCallback( this, SearchComplete, [ videoSearch ] );

      // 検索を実行する
      videoSearch.execute( '金星' );
  }


  google.load( 'search', '1' );
  google.setOnLoadCallback( OnLoad );

</script>

<div id="content"></div>

サムネイル

サムネイルのURLは

http://ドメイン/vi/動画ID/ファイル名

の形式となっています。ドメインは次の4つのいずれかであり、すべて同じ画像を参照します。

  • i.ytimg.com
  • i[1-4の数値].ytimg.com
  • [0-3の数値].gvt0.com
  • img.youtube.com

ファイル名には次の5つがあります。既定ではdefault.jpgが使用されますが、ほかのファイル名を指定することで、異なるサイズや瞬間のサムネイルを参照できます。

  • default.jpg
  • 0.jpg
  • 1.jpg
  • 2.jpg
  • 3.jpg

検索条件

WebSearchやImagesSearchと異なり、setSiteRestrictionやsetRestrictionは使用できません。

結果プロパティ

取得例

videoSearch.execute( '金星' );
google.search.VideoSearch.RawCompletion('0', {
    "results" : [{
            "GsearchResultClass" : "GvideoSearch",
            "title" : "金星大気の謎に挑む～金星探査機あかつき（PLANET-C）～",
            "titleNoFormatting" : "金星大気の謎に挑む～金星探査機あかつき（PLANET-C）～",
            "published" : "Wed, 23 Jun 2010 22:18:30 PDT",
            "content" : "金星の大気は、その自転速度に比べ非常に速い速度で循環しており、地球では起こりえない気象現象で、スーパーローテーションと呼ばれています。この金星の大気の謎に ...",
            "publisher" : "www.youtube.com",
            "tbUrl" : "http://2.gvt0.com/vi/mtzVa3xVPjo/default.jpg",
            "tbWidth" : "320",
            "tbHeight" : "240",
            "videoType" : "YouTube",
            "url" : "http://www.google.com/url?q\u003dhttp://www.youtube.com/watch%3Fv%3DmtzVa3xVPjo\u0026source\u003dvideo\u0026vgc\u003drss\u0026usg\u003dAFQjCNEQscblVEB9kUyLcfRPUaReNx11Ew",
            "playUrl" : "http://www.youtube.com/v/mtzVa3xVPjo\u0026fs\u003d1\u0026source\u003duds\u0026autoplay\u003d1",
            "rating" : "4.9",
            "duration" : "727"
        }, {
            "GsearchResultClass" : "GvideoSearch",
            "title" : "ELLEGARDEN 金星HD",
            "titleNoFormatting" : "ELLEGARDEN 金星HD",
            "published" : "Sun, 26 Dec 2010 18:58:05 PST",
            "content" : "ELLEGARDEN",
            "publisher" : "www.youtube.com",
            "tbUrl" : "http://3.gvt0.com/vi/oUF57ECEqHs/default.jpg",
            "tbWidth" : "320",
            "tbHeight" : "240",
            "videoType" : "YouTube",
            "url" : "http://www.google.com/url?q\u003dhttp://www.youtube.com/watch%3Fv%3DoUF57ECEqHs\u0026source\u003dvideo\u0026vgc\u003drss\u0026usg\u003dAFQjCNFuypvMMCSa5B6w8qazwnCRqnriSg",
            "playUrl" : "http://www.youtube.com/v/oUF57ECEqHs\u0026fs\u003d1\u0026source\u003duds\u0026autoplay\u003d1",
            "rating" : "4.6923075",
            "duration" : "204"
        }, {
            "GsearchResultClass" : "GvideoSearch",
            "title" : "月と金星 大接近(奈良 富雄から）",
            "titleNoFormatting" : "月と金星 大接近(奈良 富雄から）",
            "published" : "Mon, 17 May 2010 04:59:42 PDT",
            "content" : "2010年5月16日の夕刻 日没～月没までの様子をTimelapse(微速度撮影）しました。主題は月と金星の大接近ですが、日没後の飛行機雲のラインが連続して表れ、途中の間延びし ...",
            "publisher" : "www.youtube.com",
            "tbUrl" : "http://3.gvt0.com/vi/z0_ipyZ-tqc/default.jpg",
            "tbWidth" : "320",
            "tbHeight" : "240",
            "videoType" : "YouTube",
            "url" : "http://www.google.com/url?q\u003dhttp://www.youtube.com/watch%3Fv%3Dz0_ipyZ-tqc\u0026source\u003dvideo\u0026vgc\u003drss\u0026usg\u003dAFQjCNGLoK_v-27enoSJTDXSMZNtKPxF_Q",
            "playUrl" : "http://www.youtube.com/v/z0_ipyZ-tqc\u0026fs\u003d1\u0026source\u003duds\u0026autoplay\u003d1",
            "rating" : "5",
            "duration" : "257"
        }, {
            "GsearchResultClass" : "GvideoSearch",
            "title" : "Susumu Hirasawa - Venus",
            "titleNoFormatting" : "Susumu Hirasawa - Venus",
            "published" : "Wed, 03 Jun 2009 07:35:37 PDT",
            "content" : "デューン7. フローズン・ビーチ8. 時空の水9. スケルトン・コースト公園10.金星 ... lapyria ... Susumu Hirasawa Kinsei Venus 金星Water In Time And Space 1989 ...",
            "publisher" : "www.youtube.com",
            "tbUrl" : "http://3.gvt0.com/vi/dZL2sxYElFs/default.jpg",
            "tbWidth" : "320",
            "tbHeight" : "240",
            "videoType" : "YouTube",
            "url" : "http://www.google.com/url?q\u003dhttp://www.youtube.com/watch%3Fv%3DdZL2sxYElFs\u0026source\u003dvideo\u0026vgc\u003drss\u0026usg\u003dAFQjCNFeV3-sMpYa8HIuZ6p4pdK_LKPnnQ",
            "playUrl" : "http://www.youtube.com/v/dZL2sxYElFs\u0026fs\u003d1\u0026source\u003duds\u0026autoplay\u003d1",
            "rating" : "5",
            "duration" : "198"
        }
    ],
    "cursor" : {
        "pages" : [{
                "start" : "0",
                "label" : 1
            }, {
                "start" : "4",
                "label" : 2
            }, {
                "start" : "8",
                "label" : 3
            }, {
                "start" : "12",
                "label" : 4
            }, {
                "start" : "16",
                "label" : 5
            }, {
                "start" : "20",
                "label" : 6
            }, {
                "start" : "24",
                "label" : 7
            }, {
                "start" : "28",
                "label" : 8
            }
        ],
        "estimatedResultCount" : "4765",
        "currentPageIndex" : 0,
        "moreResultsUrl" : "http://video.google.com/videosearch?source\u003duds\u0026type\u003dsearch\u0026q\u003d%E9%87%91%E6%98%9F+(site:video.google.com+OR+site:youtube.com+)\u0026hl\u003dja\u0026start\u003d0"
    }
}, 200, null, 200)

Internet Explorerでの注意事項

IEでは動画の埋め込み先の要素をembedやobject要素で先に作成しておくと、setOnLoadCallbackが呼び出されなくなります。

具体的にはHTMLで、

<embed type="application/x-shockwave-flash" id="content"></embed>

のようにembed要素を作成しておき、検索結果をこの要素のsrc属性に設定するような方法は実行できません。

参考

実装方法別の検索対象
  Googleビデオ YouTube
Video Search Control ○ ×
Video Bar × ○
Search Control ○ ○
Video Search ○ ○

動画検索コントロール (Video Search Control)

検索ボックスと検索結果のサムネイルを備え、動画はコントロールの上部に埋め込む形で再生されます。

実行例

Loading...

サンプルコード

<!-- Google AJAX Search APIのライブラリを読み込む -->
<script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&amp;v=1.0"></script>

<!-- Video Search Controlのライブラリを読み込む -->
<script type="text/javascript" src="http://uds.googleusercontent.com/uds/solutions/videosearch/gsvideosearch.js"></script>

<style type="text/css">
  /* Video Searchのスタイルシートを読み込む */
  @import url( "http://uds.googleusercontent.com/uds/solutions/videosearch/gsvideosearch.css" );

  /* Video Search Controlを表示する要素のスタイルシートを設定する */
  #video-container {
      width: 300px;
      margin: 10px;
      padding: 5px;
      border: 1px solid gray;
  }
</style>

<script type="text/javascript">

  var defaultTags = [
      { query : 'paris hilton' },
      { query : 'mtv' },
      { query : 'jessica simpson', label : 'jessica' },
      { query : 'vw gti' }
      ];

  function LoadTags()
  {
      return GSvideoSearchControl_JSON.stringify( defaultTags );
  }

  function SaveTags( tags )
  {
      alert( tags );
  }

  function OnLoad()
  {
      var container = document.getElementById( 'video-container' );
      var options = { largeResultSet : false };

      var videoSearchControl = new GSvideoSearchControl(
          container,      // 検索コントロールを表示する要素
          defaultTags,    // 既定の検索語の配列
          LoadTags,       // タグ編集時に呼び出す関数
          SaveTags,       // タグ保存時に呼び出す関数
          options         // オプション
          );
  }

  // ドキュメントがロードされた後に呼び出されるハンドラ関数を登録する
  GSearch.setOnLoadCallback( OnLoad );

</script>

使用方法

AJAX Search APIとVideo Search Controのライブラリを読み込み、GSvideoSearchControlのオブジェクトを作成します。Video Search Control Programming Guide

GSvideoSearchControl(
  container,      // 検索コントロールを表示する要素
  defaultTags,    // 既定の検索語の配列
  LoadTags,       // タグ編集時に呼び出す関数
  SaveTags,       // タグ保存時に呼び出す関数
  options         // オプション
  );

オプション

GSvideoSearchControlの第5引数optionsの値
プロパティ 説明 値
largeResultSet 検索結果数 (true=8、false=4) true or false
twoRowMode Two Row Display Mode true or false
string_allDone プレーヤー上部に表示される文字 文字列
startupDelay 起動時の遅延時間 [ms] 50 ～ 2000

タグの編集

GSvideoSearchControlのコンストラクタの引数に、タグ編集時に呼び出される関数を登録することで、タグの編集機能が追加されます。


タグ編集画面へのリンク
タグ編集画面

参考

  • Google AJAX Search API - AJAX Video Search Control

動画バー (Video Bar)

検索結果のサムネイルのみを表示し、動画は画面上にフローティングする形で重ねて表示されます。

実行例

Loading...

サンプルコード

<!-- Google AJAX Search APIのライブラリを読み込む -->
<script type="text/javascript" src="http://www.google.com/uds/api?file=uds.js&v=1.0"></script>

<!-- Video Barのライブラリを読み込む -->
<script type="text/javascript" src="http://uds.googleusercontent.com/uds/solutions/videobar/gsvideobar.js"></script>

<style type="text/css">
  /* Google AJAX Search APIのスタイルシートを読み込む */
  @import url( "http://www.google.com/uds/css/gsearch.css" );

  /* Video Barのスタイルシートを読み込む */
  @import url( "http://uds.googleusercontent.com/uds/solutions/videobar/gsvideobar.css" );

  /* プレーヤーの大きさ */
  .playerInnerBox_gsvb .player_gsvb {
      width: 480px;
      height: 380px;
  }
</style>

<script type="text/javascript">

  function OnLoad()
  {
      var options = {
          horizontal : true,  // 水平方向に配置
          }

      // Video Barのオブジェクトを作成する
      var videoBar = new GSvideoBar(
          document.getElementById( 'videobar' ),  // コントロールを埋め込む要素
          GSvideoBar.PLAYER_ROOT_FLOATING,        // プレーヤーのフローティング表示を指定
          options
          );

      // 検索を実行する
      videoBar.execute( 'music' );
  }

  // ドキュメントがロードされた後に呼び出されるハンドラ関数を登録する
  GSearch.setOnLoadCallback( OnLoad );

</script>

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

使用方法

Google AJAX Search APIとVideo Barのライブラリを読み込み、GSvideoBarのオブトを成します。Video Bar Programming Guide

オプション

GSvideoBarの第3引数optionsの値
プロパティ 説明 値
largeResultSet 検索結果数 (true=8、false=4) true or false
master   vbr
horizontal   true
thumbnailSize  
  • GSvideoBar.THUMBNAILS_SMALL
  • GSvideoBar.THUMBNAILS_MEDIUM
string_allDone プレーヤー上部に表示される文字 文字列
autoExecuteList   (下表を参照)
autoExecuteListの値
プロパティ 説明 値
cycleTime  
  • GSvideoBar.CYCLE_TIME_SHORT
  • GSvideoBar.CYCLE_TIME_MEDIUM
  • GSvideoBar.CYCLE_TIME_LONG
cycleMode  
  • GSvideoBar.CYCLE_MODE_RANDOM
  • GSvideoBar.CYCLE_MODE_LINEAR
statusRoot    
executeList    

参考

  • Google AJAX Search API - AJAX Video Bar

検索コントロール (Search Control)

検索ボックスを備え、検索結果はサムネイルとその説明文が表示されます。また表示スタイルを変更したり、検索結果の続きを表示する機能も備えます。検索対象はYouTubeとGoogleビデオです。

実行例

Loading...

サンプルコード

<!-- Google AJAX API ローダーのライブラリをインクルードする -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

  function OnLoad()
  {
    // 検索コントロールを作成する
    var searchControl = new google.search.SearchControl();

    // 検索コントロールに動画検索のサーチャーを追加する
    searchControl.addSearcher( new google.search.VideoSearch() );

    // 検索コントロールを描画する
    searchControl.draw( document.getElementById( 'search-control' ) );

    // 検索を実行する
    searchControl.execute( 'ytchannel:LOTTE' );
  }


  // Search APIをロードする
  google.load( 'search', '1' );

  // ドキュメントがロードされた後に呼び出されるハンドラ関数を登録する
  google.setOnLoadCallback( OnLoad );

</script>

<div id="search-control">Loading...</div>

使用方法

Google AJAX Search APIを読み込み、作成したSearchControlにVideoSearchを追加することで、動画を検索対象とした検索コントロールを作成できます。これは画像検索で検索コントロールを使用する方法と基本的に同一です。

YouTubeから検索

YouTubeのみを検索対象とするならば、特定のYouTubeチャンネルのみを対象にしたり、動画の評価を指定して検索を実行できます。

そのためには検索時のクエリで、

ytchannel:ChannelName

のように指定します。

ちなみにYouTube Data APIで同様のことを行うには、

http://gdata.youtube.com/feeds/api/users/ChannelName/uploads

とします。

参考

  • google.search.VideoSearch - Google AJAX Search API
  • google.search.SearchControl - Google AJAX Search API

JavaScriptを使用しない方法

結果プロパティ

取得例

http://ajax.googleapis.com/ajax/services/search/video?v=1.0&q=金星 
{
    "responseData" : {
        "results" : [{
                "GsearchResultClass" : "GvideoSearch",
                "title" : "金星大気の謎に挑む～金星探査機あかつき（PLANET-C）～",
                "titleNoFormatting" : "金星大気の謎に挑む～金星探査機あかつき（PLANET-C）～",
                "published" : "Wed, 23 Jun 2010 22:18:30 PDT",
                "content" : "金星の大気は、その自転速度に比べ非常に速い速度で循環しており、地球では起こりえない気象現象で、スーパーローテーションと呼ばれています。この金星の大気の謎に ...",
                "publisher" : "www.youtube.com",
                "tbUrl" : "http://2.gvt0.com/vi/mtzVa3xVPjo/default.jpg",
                "tbWidth" : "320",
                "tbHeight" : "240",
                "videoType" : "YouTube",
                "url" : "http://www.google.com/url?q\u003dhttp://www.youtube.com/watch%3Fv%3DmtzVa3xVPjo\u0026source\u003dvideo\u0026vgc\u003drss\u0026usg\u003dAFQjCNEQscblVEB9kUyLcfRPUaReNx11Ew",
                "playUrl" : "http://www.youtube.com/v/mtzVa3xVPjo\u0026fs\u003d1\u0026source\u003duds\u0026autoplay\u003d1",
                "rating" : "4.9",
                "duration" : "727"
            }, {
                "GsearchResultClass" : "GvideoSearch",
                "title" : "ELLEGARDEN 金星HD",
                "titleNoFormatting" : "ELLEGARDEN 金星HD",
                "published" : "Sun, 26 Dec 2010 18:58:05 PST",
                "content" : "ELLEGARDEN",
                "publisher" : "www.youtube.com",
                "tbUrl" : "http://3.gvt0.com/vi/oUF57ECEqHs/default.jpg",
                "tbWidth" : "320",
                "tbHeight" : "240",
                "videoType" : "YouTube",
                "url" : "http://www.google.com/url?q\u003dhttp://www.youtube.com/watch%3Fv%3DoUF57ECEqHs\u0026source\u003dvideo\u0026vgc\u003drss\u0026usg\u003dAFQjCNFuypvMMCSa5B6w8qazwnCRqnriSg",
                "playUrl" : "http://www.youtube.com/v/oUF57ECEqHs\u0026fs\u003d1\u0026source\u003duds\u0026autoplay\u003d1",
                "rating" : "4.6923075",
                "duration" : "204"
            }, {
                "GsearchResultClass" : "GvideoSearch",
                "title" : "月と金星 大接近(奈良 富雄から）",
                "titleNoFormatting" : "月と金星 大接近(奈良 富雄から）",
                "published" : "Mon, 17 May 2010 04:59:42 PDT",
                "content" : "2010年5月16日の夕刻 日没～月没までの様子をTimelapse(微速度撮影）しました。主題は月と金星の大接近ですが、日没後の飛行機雲のラインが連続して表れ、途中の間延びし ...",
                "publisher" : "www.youtube.com",
                "tbUrl" : "http://3.gvt0.com/vi/z0_ipyZ-tqc/default.jpg",
                "tbWidth" : "320",
                "tbHeight" : "240",
                "videoType" : "YouTube",
                "url" : "http://www.google.com/url?q\u003dhttp://www.youtube.com/watch%3Fv%3Dz0_ipyZ-tqc\u0026source\u003dvideo\u0026vgc\u003drss\u0026usg\u003dAFQjCNGLoK_v-27enoSJTDXSMZNtKPxF_Q",
                "playUrl" : "http://www.youtube.com/v/z0_ipyZ-tqc\u0026fs\u003d1\u0026source\u003duds\u0026autoplay\u003d1",
                "rating" : "5",
                "duration" : "257"
            }, {
                "GsearchResultClass" : "GvideoSearch",
                "title" : "Susumu Hirasawa - Venus",
                "titleNoFormatting" : "Susumu Hirasawa - Venus",
                "published" : "Wed, 03 Jun 2009 07:35:37 PDT",
                "content" : "デューン7. フローズン・ビーチ8. 時空の水9. スケルトン・コースト公園10.金星 ... lapyria ... Susumu Hirasawa Kinsei Venus 金星Water In Time And Space 1989 ...",
                "publisher" : "www.youtube.com",
                "tbUrl" : "http://3.gvt0.com/vi/dZL2sxYElFs/default.jpg",
                "tbWidth" : "320",
                "tbHeight" : "240",
                "videoType" : "YouTube",
                "url" : "http://www.google.com/url?q\u003dhttp://www.youtube.com/watch%3Fv%3DdZL2sxYElFs\u0026source\u003dvideo\u0026vgc\u003drss\u0026usg\u003dAFQjCNFeV3-sMpYa8HIuZ6p4pdK_LKPnnQ",
                "playUrl" : "http://www.youtube.com/v/dZL2sxYElFs\u0026fs\u003d1\u0026source\u003duds\u0026autoplay\u003d1",
                "rating" : "5",
                "duration" : "198"
            }
        ],
        "cursor" : {
            "pages" : [{
                    "start" : "0",
                    "label" : 1
                }, {
                    "start" : "4",
                    "label" : 2
                }, {
                    "start" : "8",
                    "label" : 3
                }, {
                    "start" : "12",
                    "label" : 4
                }, {
                    "start" : "16",
                    "label" : 5
                }, {
                    "start" : "20",
                    "label" : 6
                }, {
                    "start" : "24",
                    "label" : 7
                }, {
                    "start" : "28",
                    "label" : 8
                }
            ],
            "estimatedResultCount" : "4766",
            "currentPageIndex" : 0,
            "moreResultsUrl" : "http://video.google.com/videosearch?source\u003duds\u0026type\u003dsearch\u0026q\u003d%E9%87%91%E6%98%9F+(site:video.google.com+OR+site:youtube.com+)\u0026hl\u003dja\u0026start\u003d0"
        }
    },
    "responseDetails" : null,
    "responseStatus" : 200
}

関連ページ