このサンプル アプリケーションでは Media API を使用して、過去 1 週間でもっとも再生回数の多い 5 本の動画のリストをクエリし、その動画を HTML のサイドバーに表示します。動画はクリックすることができ、新しいウィンドウでプレーヤが起動されます。
読者は、JavaScript のみを使用して Media API 呼び出しを行う動的スクリプト タグの手法に習熟している必要があります。
アカウント内でもっとも視聴回数の多い 5 本の動画のリストを取得するための呼び出しの構成を見てみましょう。
http://api.brightcove.co.jp/services/library?command=find_all_videos &token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E. &video_fields=id,name,thumbnailURL,playsTrailingWeek &sort_by=plays_trailing_week&page_size=5
重要なパラメータは以下のとおりです。
video_fields=id,name,thumbnailURL,playsTrailingWeek. 各動画とともに返してほしいフィールドを指定しています。このケースで必要としているのは、name、id（動画をプレーヤで再生するため）、thumbnailURL（サムネイルを表示するため）、そして過去 7 日間に動画が再生された回数が格納されている playsTrailingWeek のみです。sort_by=plays_trailing_week. plays_trailing_week のソート順を使用して、過去 7 日間に再生された回数に従って、返される動画を並べ替えるように要求しています。デフォルトでは、並びは降順です。page_size=5. 任意で、動画を最大 100 本ずつにページ分けするよう指定することができます。このケースでは、1 ページに付き動画を 5 本ずつ返すよう指定しています。動的スクリプト タグの手法では、動的に挿入されるスクリプト タグを使用します。タグの src 属性に Media API サービス呼び出しの URL を設定しておきます。要求が返されたときに呼び出すカスタム関数を参照する callback パラメータを付加します。
このタグを作成するために、必要な属性を備えたスクリプト タグを作成する関数を記述し、ページの head 要素の子要素として付加しました。
function addScriptTag(id, url, callback) {
var scriptTag = document.createElement("script");
// スクリプト オブジェクトの属性を追加
scriptTag.setAttribute("type", "text/javascript");
scriptTag.setAttribute("charset", "utf-8");
scriptTag.setAttribute("src", url + "&callback=" + callback);
scriptTag.setAttribute("id", id);
var head = document.getElementsByTagName("head").item(0);
head.appendChild(scriptTag);
}
function getTopVideos() {
addScriptTag("topVideos",
"http://api.brightcove.co.jp/services/library?command=find_all_videos
&token=0Z2dtxTdJAxtbZ-d0U7Bhio2V1Rhr5Iafl5FFtDPY8E.
&video_fields=id,name,thumbnailURL,playsTrailingWeek
&sort_by=plays_trailing_week&page_size=5", "response");
}
コールバック関数は jsonData として渡され、JavaScript を利用しているので自動的にパースされてネイティブ オブジェクトになります。あとは結果の配列を繰り返し処理して、動画リストを表示するための HTML 構造を作成するだけです。この例では、onClick 属性を利用して各アイテムをクリック可能にし、リストには境界線を表示するために CSS を適用し、さらにページ上のサイドバー要素に適切な幅を設定しています。
function response(jsonData) {
var resp = document.getElementById("resp");
for (var i=0; i<jsonData["items"].length; i++) {
var title = jsonData["items"][i];
var str = "";
str += '<div class="title" onClick="playTitle(' + title.id + ')">';
str += '<div class="thumb"><img src="' + title.thumbnailURL + '"/></div>';
str += '<p class="displayName">' + title.name + '</p>';
str += '<p class="views">viewed ' + title.playsTrailingWeek + ' times</p>';
str += '</div>';
resp.innerHTML += str;
}
}
再生できるようにするには、Brightcove プレーヤがあるページとリンクする必要があります。この例では、ポップアップ ウィンドウに表示される単一動画プレーヤ テンプレートを使用しました。クエリ文字列を &bctid=[videoID] として videoID を渡すと、Brightcove プレーヤが自動的に検知して再生を開始します。
function playTitle(id) {
window.open("player.html?bctid=" + id,"Top_Videos_Sidebar",
"location=0,status=0,scrollbars=0,width=500,height=445");
}
注:マルチプレイリストのテンプレートでは、 プレーヤで動画を適切に表示するために lineupID で渡す必要もあります。プレーヤを Flash シェルに埋め込んでいる場合は、クエリ文字列から videoID を取得して、config["videoId"] property. でプレーヤに渡すために、ヘルパー コードを記述する必要があります。
他にも以下の基本的な例があります。