ここでは、HTML ページで Video Cloud プレーヤを公開し、Flash 専用プレーヤ API を使用してインタラクションを開始するための手順を説明します。Video Cloud では Flash Player の JavaScript 内で API を使用できるので、必要なのはテキスト エディタと Web ブラウザのみです。
このドキュメントでは、Video Cloud プレーヤの Flash バージョンのためのソリューションについて説明します。Video Cloud は、プレーヤのカスタマイズおよび動的ソリューションの開発用に 2 つの API をサポートしています。その 1 つが、Video Cloud Flash Player 用ソリューションのための Flash 専用プレーヤ API であり、もう 1 つがスマート プレーヤ用ソリューションのためのスマート プレーヤ API です。スマート プレーヤは、Flash がサポートされている場合には Video Cloud プレーヤの Flash バージョンとして機能し、サポートされていない場合には HTML バージョンとして機能します。Flash Player のみをコーディングするためのメソッドおよびイベントについては、「Flash 専用プレーヤ API リファレンス」をご覧ください。スマート プレーヤ用の動的ソリューション作成の詳細については、「スマート プレーヤ API を使用する」を参照してください。
Flash 専用プレーヤ API を使って Video Cloud Flash Player とインタラクトする方法を理解することによって、視聴者の動画体験のルック アンド フィールをプログラムからコントロールできます。このトピックでは、JavaScript の一般的な使用方法を理解していることを前提としています。まだ Flash 専用 Player API に詳しくない場合は、「Flash 専用プレーヤ API の基礎」を参照してください。「Flash 専用プレーヤ API リファレンス」には、プレーヤで利用できる各コンポーネントのすべてのメソッドとイベントが示されています。
このトピックでは、次の点について学習します。
「Video Cloud プレーヤを公開する」で、プレーヤを埋め込むためのコードを Video Cloud Studio Publishing モジュールからダウンロードします。HTML ページに埋め込むので、下記の JavaScript コードを HTML ページの <body> タグの間のどこかにコピー アンド ペーストします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Player API HTML Test </title>
</head>
<body>
<!-- Start of Brightcove Player -->
<div style="display:none">
</div>
<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C
found at http://corp.brightcove.com/legal/terms_publisher.cfm.
-->
<script language="JavaScript" type="text/javascript"
src="http://admin.brightcove.co.jp/js/BrightcoveExperiences.js"></script>
<script src="http://admin.brightcove.co.jp/js/APIModules_all.js"> </script>
<object id="myExperience" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="966" />
<param name="height" value="546" />
<param name="playerID" value="12000045388" />
<param name="publisherID" value="18786002"/>
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="@playlistTabs" value="276897321, 12000044025" />
</object>
<!-- End of Brightcove Player -->
</body>
</html>
すべての必要なクラスをプレーヤと同時に確実にロードするために、プレーヤのパブリッシング コードには Video Cloud サーバーの APIModules_all.js ファイルへの参照を含む必要があります。このコードをドキュメントにもコピー アンド ペーストします。
<script src="http://admin.brightcove.co.jp/js/APIModules_all.js"> </script>
この行は、Publishing モジュールのプレーヤで [ActionScript/JavaScript API を有効にする] を選択した場合でも、プレーヤのパブリッシング コードには自動的に追加されません。
代わりに、統合された JavaScript ライブラリ BrightcoveExperiences_all.js を使用できます。これは、BrightcoveExperiences.js および APIModules_all.js を統合したものです。したがって、次の 2 行の代わりは、以下のようになります。
<script language="JavaScript" type="text/javascript"
src="http://admin.brightcove.co.jp/js/BrightcoveExperiences.js"></script>
<script src="http://admin.brightcove.co.jp/js/APIModules_all.js"> </script>
プレーヤ パブリッシング コードにこの 1 行を含めて、両方の JavaScript ライブラリをロードできます。
<script language="JavaScript" type="text/javascript"
src="http://admin.brightcove.co.jp/js/BrightcoveExperiences_all.js"></script>
JavaScript Flash 専用プレーヤ API を利用したい Web 開発者は、この統合したライブラリを使用することにより、大きな 1 つのファイルをロードするという負担は増えますが、ページからの HTTP 呼び出しの全体数を減らすことができます。
コンテンツは、パブリッシング コードに直接割り当てることができます。使用しているプレーヤに応じ、プレーヤの起動時にロードし表示するビデオを 1 つ割り当てるか、1 つまたは複数のプレイリストを割り当てることができます。上記のパブリッシング コードは、複数のプレイリストをプロビジョニングした様子です。以下のコードは、どのようにコンテンツを指定するかを示します。
// 単一動画テンプレートでの単一動画の場合
<param name="@videoPlayer" value="123456" />
// 参照 ID を使用した単一動画の場合
<param name="@videoPlayer" value="ref:myVid12345" />
// マルチ プレイリスト テンプレートでの 1 つのプレイリストの場合
<param name="@playlistTabs" value="123456" />
// 複数のプレイリストの場合
<param name="@playlistTabs" value="123456, 7891011" />
パブリッシング コードでのコンテンツの割り当て例については、「パラメータを指定してコンテンツを Flash Player に割り当てる」および「Flash Player 内の優先コンテンツを指定する」を参照してください。
onTemplateLoaded イベントは、プレーヤがロードされ、そのサブ要素が Flash 専用プレーヤ API を通じてインタラクションする準備ができたことだけを知らせます。それ以上を行うには、使用したいコンポーネントへの参照を取得する必要があります。ページの <head> セクションのスクリプト ブロック内に onTemplateLoaded 関数を置き、プレーヤがロードされると自動的に呼び出されるようにします。
<script type="text/javascript">
var bcExp;
var modVP;
var modExp;
var modCon;
// この関数は、テンプレートがロードされると呼び出され、プレーヤおよびモジュールへの参照を保管する。
function onTemplateLoaded(experienceID) {
bcExp = brightcove.getExperience(experienceID);
modVP = bcExp.getModule(APIModules.VIDEO_PLAYER);
modExp = bcExp.getModule(APIModules.EXPERIENCE);
modCon = bcExp.getModule(APIModules.CONTENT);
}
</script>
モジュールにアクセスするには、定数値または文字列名を使用します。この例では、VideoPlayer モジュール への参照を取得します。このモジュールの API を使用すると、動画をロードして再生し、再生のステータスとイベントを取得できます。定数の一覧は、「Flash 専用プレーヤ API リファレンス」の APIModules クラスの定義に記載されています。
コンテンツのロードは、Content モジュール API を呼び出すことで行われます。プレーヤは、コンテンツがそれにプログラミングされた状態でロードされます。このコンテンツは、getMedia メソッドを使うことにより、同期して取得することができます。プレーヤにまだロードされていないデータベースからコンテンツを取得するには、非同期の呼び出しを行う必要があります。これは、データベースのルックアップには時間がかかり、ルックアップの結果が戻ってくるまでアプリケーションをブロックしないようにするためです。このような場合は、getMediaAsynch メソッドを使用します。プレイリストにも同じ規則が適用されます。
次に、プレーヤに現在ロードされている動画を取得してから、別の動画を取得する方法を例として示します。
<script type="text/javascript">var bcExp;
var modVP; var modExp; var modCon; // この関数は、テンプレートがロードされると呼び出され、プレーヤおよびモジュールへの参照を保管する。 // 次に、テンプレートの準備ができた場合、およびユーザーが動画をクリックした場合に、 // イベント リスナが追加される。 function onTemplateLoaded(experienceID) { alert("EVENT: TEMPLATE_LOAD"); bcExp = brightcove.getExperience(experienceID); modVP = bcExp.getModule(APIModules.VIDEO_PLAYER); modExp = bcExp.getModule(APIModules.EXPERIENCE); modCon = bcExp.getModule(APIModules.CONTENT); modExp.addEventListener(BCExperienceEvent.TEMPLATE_READY, onTemplateReady); modExp.addEventListener(BCExperienceEvent.CONTENT_LOAD, onContentLoad); modCon.addEventListener(BCContentEvent.VIDEO_LOAD, onVideoLoad); } function onTemplateReady(evt) { alert("EVENT: TEMPLATE_READY"); } function onContentLoad(evt) { alert("EVENT: CONTENT_LOAD"); var currentVideo = modVP.getCurrentVideo(); alert("INFO: Currently Loaded videoID: " + currentVideo.id); modCon.getMediaAsynch(1488633950); } function onVideoLoad(evt) { alert("EVENT: VIDEO_LOAD"); // ロードしたばかりの動画を再生する modVP.loadVideo(evt.video.id); } </script>
Flash 専用プレーヤ API は、友人に電子メールを送信するなど、ユーザーがプレーヤで特定の操作を実行すると通知することができます。これらのイベントをキャプチャし、シンプルなイベント リスナを使用して分析のバックエンドを送信することができます。
<script type="text/javascript">
var bcExp;
var modMenu;
function onTemplateLoaded(experienceID) {
alert("EVENT: TEMPLATE_LOAD");
bcExp = brightcove.getExperience(experienceID);
modMenu = bcExp.getModule(APIModules.MENU);
modMenu.addEventListener(BCMenuEvent.SEND_EMAIL_CLICK, onEmailSent);
}
function onEmailSent(evt) {
alert("An Email was sent!");
}
</script>
イベント リスナを定義するときは注意してください。JavaScript では、イベントにイベント リスナを追加したにもかかわらず、そのイベントを処理する関数を追加しないと、以後のイベント リスナは登録できません。例えば、次のような場合です。
content.addEventListener(BCContentEvent.VIDEO_LOAD, onVideoLoad); content.addEventListener(BCContentEvent.PLAYLIST_LOAD, onPlaylistLoad);
onVideoLoad がどこにも定義されていないと、getPlaylistAsynch() を呼び出したときに、playlistLoad イベントは発生せず、エラーも他のフィードバックも返ってきません。
Video Cloud デバッガ ユーティリティでは、カスタム コードのデバッグができます。experienceModule.debug() メソッドを使用して、デバッガ ユーティリティに表示されるカスタム デバッグ メッセージを作成できます。
以下は、Flash 専用プレーヤ API の要素について学ぶ際に役立つリファレンスです。