AOLVS Ajax APIで関連タグを表示、そしてビデオを検索する

 「AOL Video Search Ajax API」の「getRelatedTagsメソッド」を使ってみました。↓こんな感じです。

フォームからキーワードを送信すると、そのキーワードでビデオを検索し、そのビデオのサムネイルを表示します。サムネイルをクリックすると、そのビデオを再生します。

同時にgetRelatedTagsメソッドを使ってビデオの関連タグを取得し、そのタグをリスト表示します。タグをクリックすると、そのタグをキーワードに見立ててビデオを再検索します。

View example

getRelatedTagsメソッドは次のように使っています。

検索ボックスのキーワードを指定してgetRelatedTagsメソッドを呼び出します。このとき0件目から50件分の関連タグを要求しています。ちなみに最大は50件みたい。

  gettags = new AOLVideoSearch('6ho3uxb4tv6zo1zzz');
  gettags.attachEvent('onupdate', 'onupdatetags();');
  gettags.initialize();
  ...
  gettags.getRelatedTags(document.form.keyword.value, 0, 50);

検索した関連タグをリスト表示します。関連タグのオブジェクトモデルは「getVideoメソッド」と同じなので、ビデオと同じようなコードで関連タグのリストも表示できます。なお、このコードはprototype.jsを使っています。 

function onupdatetags() {
  if (gettags.TagSet.totalResultsReturned==0)
    return $('tags').innerHTML = '(no related tags)';
  var html = gettags.TagSet.Tag.inject('', function(s, v) {
    return s + '<li><a '
	  + ' href="#'+encodeURIComponent(v.name)+'" '
	  + ' onclick="return update(this.firstChild.nodeValue);">'
	  + v.name
	  + '</a> ('+v.count+')'
      + '</li>';
  });
  $('tags').innerHTML = '<ul>'+html+'</ul>';
}

TagSet.Tag[n]という関連タグオブジェクトのプロパティは次のとおりです。

Tag.name

タグを表す文字列です。空白を含むタグもあるようです。

Tag.count

タグに関連するビデオ数?です。