「AOL Video Search Ajax API」の「getRelatedTagsメソッド」を使ってみました。↓こんな感じです。
フォームからキーワードを送信すると、そのキーワードでビデオを検索し、そのビデオのサムネイルを表示します。サムネイルをクリックすると、そのビデオを再生します。
同時にgetRelatedTagsメソッドを使ってビデオの関連タグを取得し、そのタグをリスト表示します。タグをクリックすると、そのタグをキーワードに見立ててビデオを再検索します。
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
- タグに関連するビデオ数?です。