プレーヤ テンプレートを開発する

Product
Video Cloud
対象となる役割
開発者
バージョン
Brightcove 5
モジュール
BEML
エディション
Pro, Enterprise
作成者 Ethan Pettyjohn.

カムタム プレーヤ テンプレートは、Brightcove Pro エディションおよび Enterprise エディションをご利用の方にのみ利用できます。 Brightcove アカウントのアップグレードについては、 Brightcove にお問い合わせください。

Brightcove プレーヤは、プレーヤ テンプレートと呼ばれる XML 文書で仕様を定義します。Brightcove には多くの標準プレーヤ テンプレートがありますが、カスタム プレーヤ テンプレートを作成する機能も用意されています。このトピックでは、カスタム プレーヤ テンプレートの仕様を定義する XML 文書の記述方法を説明します。

BEML の主な要素

プレーヤ テンプレートに使用する XML は、Brightcove Experience Markup Language (BEML) の文書型定義（DTD） で定義されています。BEML DTD リファレンスでは、BEML 文書で使用できるすべての XML 要素と属性について説明しています。標準プレーヤ テンプレートをもとにして、カスタム プレーヤ テンプレート開発を始めてもよいでしょう。各標準プレーヤ テンプレートの BEML を zip ファイルとしてダウンロードできます。

プレーヤ テンプレートの各要素で、プレーヤの表示/非表示部分を定義します。要素では、文字列ラベル、バナー、動画プレーヤなどの UI 要素や、UI 要素どうしの相対的な配置、プレーヤ全体のレイアウトを定義するレイアウト要素を定義できます。プレーヤ要素の属性では、要素の位置（XY 座標として）、スタイル、表示するデータのソース（動画名、画像の位置など）を定義します。プレーヤ テンプレートの主な要素は以下のとおりです。

BEML と XML

BEML プレーヤ テンプレートは XML 文書なので、BEML を使用してカスタム プレーヤ テンプレートを開発するには、XML の基本を理解している必要があります。XML の基礎知識を習得する必要がある場合は、次のリソースなどを参照してください。

もっとも経験することの多い唯一の問題は、特殊文字に関する問題です。XML マークアップでは、以下の 5 つの特殊文字をエスケープしてください。

文字
エスケープした書式
<
&lt;
>
&gt;
&
&amp;
'
&apos;
"
&quot;

また、XML 属性には余分なスペースを含めないでください。たとえば、次のように記述します。

<element id="foo" />

次のように記述しないでください。

<element id = "foo" />

この例では等号の前後に余分なスペースがあります。このため、Publishing モジュールでプレーヤ テンプレートのスタイルを設定できません。

Labels 要素:テキストをカスタマイズおよびローカライズする

プレーヤ テンプレートの Labels 要素を使用して、プレーヤのラベル テキストすべてをカスタマイズできます。これにより、ほぼあらゆる言語のラベルを使用したプレーヤを作成でき、さらにスタイル、ブランディング、プロモーションなどを目的としてテキストをカスタマイズできます。詳細は、プレーヤをローカライズするを参照してください。

Theme 要素:外観をカスタマイズする

プレーヤ テンプレートの Theme 要素を使用して、カスタム Brightcove プレーヤの外観をカスタマイズできます。必要なカスタマイズの度合いに応じて、Theme 要素と Style 要素を使用して以下のことができます。

プレーヤ テンプレートに Theme 要素がない場合、Publishing モジュールでは、そのプレーヤ テンプレートに基づいたプレーヤのスタイルは変更できません。詳細は、プレーヤ テンプレートのテーマとスタイルを参照してください。

Layout 要素:位置をカスタマイズする

Layout 要素では、どの UI 要素をプレーヤに含め、それらをプレーヤ内のどこに配置するかを制御します。Layout 要素には、2 種類の子要素を含めることができます。レイアウト ボックスとコンポーネントです。レイアウト ボックスは他の要素のコンテナで、別のレイアウト ボックスやコンポーネントを含めることができます。入れ物となるレイアウト ボックスでは、子要素をどのように配置し、サイズをどのくらいにするかを定義します。コンポーネントとは UI 要素自体のことで、VideoPlayer、Label、Image などがあります。

一般には、レイアウト ボックスはレンダリングされません。背景色や背景画像をレイアウト ボックスに割り当てても、すべての子要素の後ろにレンダリングされるからです。以下の標準レイアウト ボックスを使用できます。

Canvas

もっともシンプルなレイアウト ボックス。Canvas の子要素は、子要素内で指定された (x, y) をキャンバス ボックス内の絶対位置として配置されます。

HBox

すべての子要素を横に並べる、水平ボックス。HBox の子要素は左から右へ順に並べられ、各子要素は前の子要素のすぐ右側に配置されます。間にスペースを設けることもできます。

VBox

すべての子要素を縦に並べる、垂直ボックス。VBox の子要素は上から下へ順に並べられ、各子要素は前の子要素のすぐ下に配置されます。間にスペースを設けることもできます。

Grid

より複雑な配置が可能なレイアウト ボックスで、子要素を列と行で配置します。

TextRegion

TextRegion では、テキスト コンポーネント（ラベルやリンクなど）をグループ化して、Publishing モジュールのスタイリング モードで、そのグループをまとまりのあるコンポーネントとして表現することができます。このコンポーネントには、領域の背景およびボーダー色を指定する新機能もあります。

Layout 要素とレイアウト ボックスについての詳細は、プレーヤ テンプレートのレイアウト要素を参照してください。

コンポーネント:UI 要素

コンポーネントには、プレーヤのレイアウトに含めることができる、さまざまなオブジェクトのクラスがあります。コンポーネントは VideoPlayer や Image のように表示されるものもあれば、非表示のものもあります。これらの要素は、プレーヤでは以下のように表示されます。

Brightcove には以下の標準コンポーネントがあります。それぞれの詳細は、プレーヤ テンプレートのコンポーネントおよび BEML DTD リファレンスで説明されています。

VideoPlayer

動画ウィンドウと、標準の Brightcove メディア コントロール一式を組み合わせたもの。 再生/一時停止スイッチ、タイムライン スクラバ、ボリューム調整、最大化コントロール、メニュー アクセス ボタンなどのコントロールがあります。

VideoDisplay

標準のメディア コントロール バーがない、動画ウィンドウ。

ChromelessVideoPlayer

ChromelessVideoPlayer は VideoDisplay コンポーネントと外観が似ていますが、「クローム」プレーヤ コントロールがありません。視聴者がマウス カーソルを動画表示領域上に置くと、プレーヤ コントロールが動画表示の下部に現れます。

MediaControls

Playhead や ToggleButtons など、再生をコントロールする他のコンポーネントを含む、レイアウト コンテナ。

Playhead

再生中に絶えず動くスクラバ バーであり、メディアの現在の位置を示します。プレイヘッドを前後に移動させると、メディア内で前に戻ったり、先に進んだりすることができます。

VolumeControl

再生中に音量をコントロールする垂直スライダ。

ToggleButton

ラベル付きのクリック可能なグラフィック。2 つの状態を切り替えることができます。オンおよびオフの状態に示す異なるグラフィック（アイコン）、ラベル、ツールチップ、およびクリック アクションを定義できます。

Label

シンプルなテキスト コンポーネント。プレーヤに任意のテキストを追加できます。このテキストは他の任意のコンポーネントのプロパティへ動的にバインドして、現在再生している動画の名前の表示などを行うことができます。

TitleLabel

Label コンポーネントの一種。「selected」状態のレンダリングが可能です。現在選択されているアイテムを区別したいリストで役立ちます。

Image

Image では、サイズ調整可能な表示要素（JPEG、GIF、SWF）をプレーヤにロードします。

Button

ラベル付きの、クリック可能なグラフィック。イベントをブロードキャストできます。

ThumbnailButton

画像を表示します。視聴者が画像の上にカーソルを移動すると、ボタンは再生アイコンを表示します。

Link

他の URL へのアクセスや、JavaScript 呼び出しのために、クリック可能なテキストをプレーヤに表示する手段を提供します。

List

ユーザ定義のリスト アイテムの縦スクロール リストです。List には ListItem が含まれており、各 ListItem には別のコンポーネントが含まれています。

TileList

ユーザ定義のリスト アイテムのグリッド リストです。TileList には ListItem が含まれており、各 ListItem には別のコンポーネントが含まれています。

ListItem

ListItem は、List または TileList コンポーネント内に定義する必要があります。リスト内にレンダリングされるすべてのリスト アイテムの視覚的定義を行います。ListItem の定義では、Layout 要素と同じ BEML を使用します。サブコンポーネントとしては、VideoPlayer と他のリスト以外であれば、サポートされているコンポーネントをどれでも使用できます。

Banner

Banner は、プレーヤに広告機能を追加します。バナー ノードを追加すると、新しいフォーマットが許可されて広告サーバ呼び出しすべてに付加され、バナー表示が可能であることが広告サーバに通知されます。バナーのサイズでサポートされる広告フォーマットが決まるため、468x60 バナー要素では、デフォルトで 468x60 バナーの広告フォーマットがサポートされます。他の広告フォーマットも指定できるため、大きなバナー領域で小さなサイズのバナーを複数利用することもできます。大きな領域内でのバナーの縮尺や整列は、Banner の属性で制御します。

ExpandingBanner

ExpandingBanner は、プレーヤに広告機能を追加します。エキスパンド バナー ノードを追加すると、2 つの新しいフォーマットが許可されて広告サーバ呼び出しすべてに付加され、バナー表示が可能であることが広告サーバに通知されます。バナーのサイズでサポートされる広告フォーマットが決まるため、468x60 バナー要素ではデフォルトで、468x60 バナーの広告フォーマットと 468x60 の同期バナーユニットがサポートされます。

Spacer

見た目を整えるためのコンポーネントで、他のコンポーネント間のスペースを作ります。

TabBar

水平にページ展開する、一連のタブ。TabBar では、コレクションから 1 つを選択できます。TabBar でタブの数がコンポーネントのサイズを超える場合には、左右方向のナビゲーションが表示されます。任意で、TabBar ではロールオーバー時にドロップダウン リストを出現させるタブを表示できます。

SWFLoader

SWFLoader コンポーネントにより、カスタム コンポーネントをロードして、プレーヤ内での配置とサイズ調整ができます。ロードされた SWF はハンドルをランタイム API に渡され、イベントを待機したり、プレーヤの他の部分と連動することができます。カスタム コンポーネントの詳細は、カスタム プレーヤ コンポーネントを作成するおよびカスタム コンポーネントをプレーヤ テンプレートに追加するを参照してください。

Modules 要素:カスタム コンポーネント

Modules 要素を使用して、レンダリングしないカスタム コンポーネントをプレーヤにロードできます。カスタム モジュールは SWF にコンパイルし、Brightcove の外部でホストしておく必要があります。カスタム モジュールを指定するには、Modules 要素の子として、ロードする SWF のパスを file 属性に設定した Module 要素を含めます。次に例を示します。

<Modules>
  <Module file="http://myserver/customReporting.swf" />
</Modules>

オプションで Module 要素は、任意の数のパラメータを含むことができます。パラメータは、SWF のロード時に SWF に渡されます。

<Module file="http://server/file.swf">
  <param name="foo" value="bar" />
  <param name="food" value="grill" />
</Module>

パラメータの値は、プレーヤ テンプレートの他の要素にバインドすることもできます。たとえば、モジュールが、HTML の flashvar パラメータ セットを必要とし、また、変更のたびに動画の名前を必要とする場合、次の BEML がそれに対応します。

<Module file="http://server/file.swf">
  <param name="customParam" value="{player.parameters.customParam}" />
  <param name="videoName" value="{videoPlayer.video.displayName}" />
</Module>

プレーヤに 1 つ以上の SWF をロードするという場合、Modules 要素の子要素として 1 つ以上の Module を持つことができます。プレーヤにレンダリングする必要のあるカスタム コンポーネントは、代わりに SWFLoader コンポーネントを使用します。カスタム コンポーネントの詳細は、カスタム プレーヤ コンポーネントを作成するおよびカスタム コンポーネントをプレーヤ テンプレートに追加するを参照してください。

次のステップ

プレーヤ テンプレートを構成する要素の詳細については、以下を参照してください。