カムタム プレーヤ テンプレートは、Brightcove Pro エディションおよび Enterprise エディションをご利用の方にのみ利用できます。Brightcove アカウントのアップグレードについては、Brightcove にお問い合わせください。
Brightcove プレーヤ テンプレートを使用すると、独自のカスタム コンポーネントを作成することができます。カスタム コンポーネントには、人気の動画を表示するサイドバーやプロモーションを示すバナーなどのような表示コンポーネントと、アナリティクス SWF などの非表示コンポーネントがあります。
カスタム プレーヤ コンポーネントを開発し配備する主な手順は次のとおりです。
<SWFLoader> または <Module> 要素で参照し、プレーヤに組み込みます。このトピックでは次の項目について説明します。
カスタム コンポーネントが、SWF ファイルにコンパイルした Flash ファイルとして作成されます。カスタム コンポーネントは、ActionScript 3 および Brightcove Player API を使用して開発することができます。ActionScript 2 SWF は、プレーヤと連動できないので注意してください。
BEML を介し、Brightcove プレーヤによってロードされる SWF を指定するタグが 2 つあります。1 つ目は SWFLoader であり、ディスプレイ リストに追加され、プレーヤによって配置される要素です。これは、SWF を子としてロードします。2 つ目は Module です。これは、ディスプレイ リストに追加されない SWF を指定しますが、プレーヤにロジックを追加するために使用される非レンダリング要素です（たとえば、カスタム アナリティクス サーバーの呼び出し、レンディション選択のための異なるロジックの提供など）。どちらの場合でも、Brightcove プレーヤ ActionScript API と連動するために SWF を設定する方法は同じです。アプリケーションの開発に着手する際に推奨されるコードを見てみましょう。
Brightcove プレーヤと直接連動する場合、コンパイルの対象となる内部クラスにはアクセスできません。そのため、記述されるコードは、すべての API クラスを Object インスタンスにキャストする必要があります。これにより、Flex Builder などの IDE が提供する便利なストロング タイピング、コード ヒンティング、またはコンパイル時間チェックが使用できなくなります。この制約を受けないようにするには、特別なクラスを使用し、内部プレーヤ クラスをラップします。
setInterface() メソッドを定義する必要があります。メソッドに渡されるオブジェクトは、flash.events.IEventDispatcher を実装し、ストロング タイピングおよびコード ヒントを取得するために、com.brightcove.api.BrightcoveModuleWrapper クラスにラップすることができます。
// 必ず com.brightcove.api.BrightcoveModuleWrapper をインポートすること
private var _player:BrightcoveModuleWrapper;
public function setInterface(player:IEventDispatcher):void {
_player = new BrightcoveModuleWrapper(player);
}
ExperienceModule が使用可能であるかどうかを確認します。使用できない場合は、プレーヤ インスタンスでこの API が有効になっていないということであり、必要な API クラスがロードされていません。loadModules() を呼び出すことによってこれらのクラスを強制的にロードできます。MODULES_LOADED がディスパッチされるまで待機します。
// 必ず com.brightcove.api.APIModules をインポートすること
// 必ず com.brightcove.api.events.ExperienceEvent をインポートすること
// 必ず com.brightcove.api.modules.ExperienceModule をインポートすること
private var _player:BrightcoveModuleWrapper;
private var _experienceModule:ExperienceModule;
public function setInterface(player:Object):void {
_player = new BrightcoveModuleWrapper(player);
_experienceModule = _player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
if (_experienceModule == null) {
_player.addEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
_player.loadModules();
} else {
checkReady();
}
}
onModulesLoaded() ハンドラを追加しました。これは単に ExperienceModule が存在するかチェックし（存在する必要があり、そうでないとハンドラが呼び出されない）、まだ説明していない checkReady() メソッドを呼び出すためのものです。
private function onModulesLoaded(event:ExperienceEvent):void {
_player.removeEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
_experienceModule = _player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
if (_experienceModule != null) {
checkReady();
}
}
checkReady() メソッドは、どの SWFLoader または Module SWF にも必要となる、もう 1 つの重要なチェックを実行しなくてはなりません。それは、TEMPLATE_READY イベントがプレーヤによって発生したかどうかの確認です。ExperienceModule には、これをチェックするための getReady() メソッドがあります。プレーヤの準備ができていなければ、TEMPLATE_READY イベントのリスナを確立する必要があります。
private function checkReady():void {
if (_experienceModule.getReady()) {
initialize();
} else {
_experienceModule.addEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
}
}
onTemplateReady() ハンドラは、checkReady() にあった同じ onTemplateReady() メソッドを呼び出すだけです。これは最後に紹介します。
private function onTemplateReady(event:ExperienceEvent):void {
_experienceModule.removeEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
initialize();
}
initialize() メソッドをコーディングします。この時点で、プレーヤは準備ができており、API はロードされているはずです。すべての API インタラクションを自由に行えます。
private function initialize():void {
// すべてのカスタム API インタラクション コード
}
package {
import com.brightcove.api.APIModules;
import com.brightcove.api.BrightcoveModuleWrapper;
import com.brightcove.api.events.ExperienceEvent;
import com.brightcove.api.modules.ExperienceModule;
import flash.display.Sprite;
import flash.events.IEventDispatcher;
public class Module extends Sprite {
private var _player:BrightcoveModuleWrapper;
private var _experienceModule:ExperienceModule;
private function initialize():void {
// すべてのカスタム API インタラクション コード
}
private function checkReady():void {
if (_experienceModule.getReady()) {
initialize();
} else {
_experienceModule.addEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
}
}
private function onTemplateReady(event:ExperienceEvent):void {
_experienceModule.removeEventListener(ExperienceEvent.TEMPLATE_READY, onTemplateReady);
initialize();
}
private function onModulesLoaded(event:ExperienceEvent):void {
_player.removeEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
_experienceModule = _player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
if (_experienceModule != null) {
checkReady();
}
}
public function setInterface(player:IEventDispatcher):void {
_player = new BrightcoveModuleWrapper(player);
_experienceModule = _player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
if (_experienceModule == null) {
_player.addEventListener(ExperienceEvent.MODULES_LOADED, onModulesLoaded);
_player.loadModules();
} else {
checkReady();
}
}
}
}
これを、SWFLoader および Modules SWF の初期コードとして使用すると、API の準備を整え、SWF がロードされるプレーヤ インスタンスと自由に連動できるようになります。当然、このコードは推奨であり、モジュールごとに異なる可能性はほとんどないため、Brightcove Player API SWC は、このコードを抽象クラスでも提供しています。それを拡張して使用することができます。次の項で、その方法を示します。
前の項のコードは、カスタム モジュールを開発する際のシンプルなテンプレートです。ほとんどの場合、コードは一貫性を保つため、Brightcove API SWC は追加クラス（CustomModule）を提供します。これを拡張し、これと同じ機能を得ることができます。1 つのメソッド、initialize() を拡張するだけです。次の手順で、その方法を示します。
Sprite ではなく CustomModule を拡張します。
package {
import com.brightcove.api.CustomModule;
public class Module extends CustomModule {
}
}
initialize() をオーバーライドする必要があります。
package {
import com.brightcove.api.CustomModule;
public class Module extends CustomModule {
override protected function initialize():void {
}
}
}
initialize() メソッドが呼び出されると、すべての必須インタラクションを自由に実行できるようになります。BrightcoveModuleWrapper インスタンスを含むプレーヤ プロパティを通じ、プレーヤにアクセスすることができるようになります。次に、ExperienceModule にアクセスする方法を示します。
package {
import com.brightcove.api.APIModules;
import com.brightcove.api.CustomModule;
import com.brightcove.api.modules.ExperienceModule;
public class Module extends CustomModule {
private var _experienceModule:ExperienceModule;
override protected function initialize():void {
_experienceModule = player.getModule(APIModules.EXPERIENCE) as ExperienceModule;
}
}
}
Module または SWFLoader SWF 用の基本クラスとして CustomModule を使用すると、API に常にアクセスできるほか、プレーヤの準備が整うまでインタラクションは行われません。プレーヤのプロパティ、つまり 1 つの BrightcoveModuleWrapper インスタンスが公開されるので、インタラクションによりコード ヒントとストロング タイピングを使用できます。
カスタム コンポーネントの作成、およびプレーヤ テンプレートでの使用例を示します。この例には、以下のファイルが含まれます。
thumb_grid.xml）thumb_grid.html）ThumbGrid カスタム コンポーネントは、Player API を使用してコンテンツをロードし、動画プレーヤ コンポーネントを操作します。このコンポーネントのソース コードをダウンロードできます。ThumbGrid コンポーネントは、以下の関数を定義します。
ThumbGrid プレーヤ テンプレートは非常にシンプルで、標準的な VideoPlayer コンポーネント、そして、SWFLoader 要素を使用してロードされるカスタム ThumbGrid コンポーネントという 2 つのコンポーネント、が組み込まれています。プレーヤ テンプレートは次のようになります。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE Runtime SYSTEM "http://admin.brightcove.co.jp/dtds/beml_rt.dtd">
<Runtime>
<Layout width="526" height="412">
<VideoPlayer id="videoPlayer" x="3" y="3"
width="486" height="406" depth="1"/>
<SWFLoader width="200" height="406" x="492" y="3"
source="https://help.brightcove.co.jp/developer/docs/playerapi/ThumbGrid.swf"
depth="2"/>
</Layout>
</Runtime>
SWFLoader 要素の属性は、プレーヤ レイアウト内での ThumbGrid コンポーネントのサイズと位置を指定します。
プレーヤをロードする HTML ページの例には、プレーヤ パブリッシング コードと、プレーヤにプレイリストを渡す JavaScript スニペットが含まれます。
<script language="JavaScript" type="text/javascript">
function getPlaylistID() {
return 60818943;
}
</script>
カスタム プレーヤ コンポーネントの別の例は、カスタム コンポーネントのサンプル: ソーシャル共有ウィジェットを参照してください。
カスタム コンポーネントの中には、実行時にページまたはプレーヤから構成値を提供しなければならないものもあります。たとえば、追跡データを適切に関連付けたり、他の設定に対してリアルタイムのルックアップを実行したりできるよう、コンポーネントに id を提供する必要がある場合です。
この問題に対する解決策の 1 つとして、Flash の JavaScript を呼び出す機能を活用することが挙げられます。たとえば、JavaScript によって HTML ページで指定されたプレイリスト id があり、コンポーネントの SWF でその ID を取得するとします。HTML ページの JavaScript フラグメントは、次のようになります。
<script language="JavaScript" type="text/javascript">
function getPlaylistID() {
return 60818943;
}
</script>
Flash コンポーネントでは、以下のプレイリスト ID 値がPlayer API 全体でプレイリストをロードするために取得され、使用されます。
function onTemplateReady(event:Event):void {
var contentModule:Object = mPlayer.getModule("content");
if (contentModule) {
contentModule.addEventListener("playlistLoad", onPlaylistLoad);
contentModule.getPlaylistAsynch(ExternalInterface.call("getPlaylistID"));
}
}
ページ上で、JavaScript の使用に依存できなければ、この戦略は成功しない可能性があります。また、<SWFLoader> または <Module> 宣言で、外部 SWF に対して URL のクエリ パラメータを指定するという戦略もあります。標準的な Flash 開発手順を使用すると、これらの URL 値にアクセスできるようになります。また、コンポーネントはクエリ パラメータの値を使用して動作を動的に調整することができます。次に例を示します。
<Modules> <Module source="http://hostname.com/player/foo.swf?playlistID='1234'&HAlign='left'"/> </Modules>
クエリ パラメータを結合するアンパサンド（&）が & のようにエスケープされている点に注意してください。プレーヤ テンプレートの他の項目と同様に Module エレメントも有効な XML にする必要があります。
コンポーネントに値を渡す別の方法は、Module または SWFLoader BEML エレメントの data 属性を使用する方法です。たとえば、ロードされた SWF に 1 つの文字列を渡す必要がある場合、その値をファイルに記載し、次のように BEML でそれを参照することができます。
<SWFLoader source="http://my.example.com/path/to/swf/A.swf" data="http://my.example.com/content/data.xml" />
SWF で、プロパティ データに対して暗黙の get 関数および set 関数を作成します。
public function get data():String {}
public function set data(value:String):void {}
暗黙の setter 関数が存在すれば、プレーヤが SWF をロードすると、BEML のファイル セットからのデータがその関数に渡されます。
プレーヤがカスタム コンポーネント SWF をロードすると、カスタム コンポーネントは、loadModules() メソッドを使用し、Player API にアクセスできます。まず、プレーヤの getModule() メソッドを使用し、プレーヤがPlayer API を既にロードしているかどうかをテストし、必要に応じて loadModules() を使用し、Player API をロードします。次に例を示します。
public function setInterface(player:Object):void {
_player = player;
_experienceModule = _player.getModule("experience");
// experience モジュールが定義されている場合、プレーヤ用の API が有効化されている
if (_experienceModule) {
checkTemplateReady();
} else {
// experience モジュールが定義されていない場合、プレーヤ用の API が無効化されており
// ロードする必要がある
_player.addEventListener(Event.COMPLETE, onModulesLoaded);
_player.loadModules();
}
}
setInterface() が呼び出され、プレーヤが渡されると、イベント リスナはプレーヤからの Event.COMPLETE を待機し、loadModules() を呼び出します。これにより、API モジュール SWF がプレーヤによってロードされるので、Player API へのアクセスが可能になります。
注:この方法は、プレーヤにロードされたカスタム コンポーネント SWF でのみ使用できます。ラッパ アプリケーションの場合は、Publishing モジュールを介してPlayer API を有効にしなくてはならないので、ラッパー アプリケーションでは使用できません。