このリファレンス トピックは、BEML から利用できる標準のプレーヤ コンポーネントについて説明しています。プレーヤ テンプレートのコンポーネントには、VideoPlayer、Label、Image などの UI 要素があります。プレーヤ コンポーネントはレイアウト ボックスの中に置き、レイアウト ボックスではプレーヤ内のコンポーネントをどのように配置するかを定義します。ChromelessVideoPlayer、List、ListItem、MediaControls､および ChromelessControls コンポーネントを除いて、コンポーネントは子要素を持ちません。
カムタム プレーヤ テンプレートは、Video Cloud Pro エディションまたは Enterprise エディションをご利用の方のみがご利用いただけます。Video Cloud アカウントのアップグレードについては、ブライトコーブにお問い合わせください。
このリファレンスでは以下の標準コンポーネントについて学びます。それぞれの詳細は、「BEML DTD リファレンス」で説明されています。
これらのコンポーネントを使用した、コンテンツやメタデータの表示に関する詳細は、「プレーヤ テンプレートのデータ バインド」を参照してください。
カスタム コンポーネントを作成して、プレーヤ テンプレートで使用することもできます。詳細については、「カスタム プレーヤ コンポーネントを作成する」を参照してください。
id 属性についてBEML コンポーネントの各タイプは、オプションの id 属性を持つことができます。あるコンポーネントが別のコンポーネントを参照する必要がある場合に、id 属性は便利です。また、Publishing モジュール スタイル エディタを使用してプレーヤの表示および編集を行いたい場合は、id 属性が必要です。id を持たないコンポーネントは、Publishing モジュール スタイル エディタで表示されません。
VideoPlayer コンポーネントは、動画ウィンドウと、標準の Video Cloud メディア コントロール一式を組み合わせたものです。 再生/一時停止スイッチ、タイムライン スクラバ、ボリューム調整、最大化コントロール、メニュー アクセス ボタンなどのコントロールがあります。例は以下のとおりです。
<VideoPlayer id="videoPlayer" width="486" height="416"
autoStart="true" theme="Deluxe" styleFile="Dark"
style="body-color:#FF0000" />
VideoPlayer には、VideoPlayer の動作を制御する特別な属性があります。
VideoPlayer の最小サイズは 180 x 176 です。これよりサイズが小さいと、コントロールやメニューが正しくレンダリングされません。
VideoDisplay コンポーネントは単なる動画ウィンドウで、標準のメディア コントロール バーもありません。例は以下のとおりです。
<VideoDisplay id="videoPlayer" width="480" height="360"
autoStart="true" />
VideoDisplay には、VideoDisplay の動作を制御する特別な属性があります。
ChromelessVideoPlayer は VideoDisplay コンポーネントと外観が似ていますが、「クローム」プレーヤ コントロールがありません。視聴者がマウス カーソルを動画表示領域上に置くと、プレーヤ コントロールが動画表示の下部に現れます。例は以下のとおりです。
<ChromelessVideoPlayer id="videoPlayer" width="480" height="360"
autoStart="true" />
ChromelessVideoPlayer には、VideoPlayer の動作を制御する特別な属性があります。
さらに、compactViewThreshold 属性を使用して、標準表示モードとコンパクト表示モードを切り換えられるクロームレス動画プレーヤを作成できます。この属性の値は、コントロールをコンパクト表示に切り換えるピクセル幅のしきい値です。次の例では、プレーヤの幅が 320 ピクセル以下になるとコンパクト表示が使用されることを compactViewThreshold 属性が示しています。
<ChromelessVideoPlayer id="videoPlayer" compactViewThreshold="320"
video="{videoList.selectedItem}">
...
</ChromelessVideoPlayer>
コントロールの標準表示およびコンパクト表示を指定するには、次の手順を行います。
id="defaultView" を、コンパクト バージョンには属性 id="compactView" を指定します。ViewStack レイアウト ボックスに配置します。ChromelessControls 要素に ViewStack 要素を入れます。完全な動作サンプルを含む詳細は、「カスタム クロームレス動画プレーヤを作成する」を参照してください。
VideoPlayer コンポーネントには、標準の Video Cloud メディア コントロール一式が含まれます。再生/一時停止スイッチ、タイムライン スクラバ、ボリューム調整、最大化コントロール、メニュー アクセス ボタンなどのコントロールがあります。ChromelessVideoPlayer コンポーネントには、同じ基本的なメディア コントロールが含まれます。ただし、コントロールは動画表示に重なり、視聴者が動画表示上にマウス ポインタを置いたときにのみ表示されます。メディア コントロール コンポーネントにより、カスタム メディア コントロール コンポーネントを作成できます。メディア コントロール コンポーネントには、次のようなものがあります。
メディア コントロールを使用する際には、動画時間や再生中のプレイヘッドの現在位置などの時間値を表示したい場合があります。これらの値をフォーマットおよび表示する方法は、「時間フォーマッタ」を参照してください。
MediaControls 要素は、Playhead や ToggleButtons など、他の BEML レイアウト要素およびコンポーネントを含むレイアウト コンテナです。MediaControls 要素は、AdvertisingContext と呼ばれる非視覚要素の使用により広告配信をサポートします。「MediaControls の例」で、詳細な例を参照してください。
ChromelessControls 要素は、Playhead や ToggleButtons など、他の BEML レイアウト要素およびコンポーネントを含むレイアウト コンテナです。コントロールは動画表示に重なり、視聴者が動画表示上にマウス ポインタを置いたときにのみ表示されます。ChromelessControls 要素は、AdvertisingContext と呼ばれる非視覚要素の使用により広告配信をサポートします。「カスタム クロームレス動画プレーヤを作成する」のトピックにある「コンパクト モードを追加する」を参照してください。
Playhead コンポーネントは再生中に絶えず動くスクラバ バーで、メディアの現在の位置を示します。プレイヘッドを前後に移動させると、メディア内で前に戻ったり、先に進んだりすることができます。mediaController 属性は、メディアが再生されているコンポーネントを特定します（VideoDisplay、VideoPlayer、ChromelessVideoPlayer）。例は以下のとおりです。
<Playhead id="playhead" mediaController="{videoPlayer}" />
BEML DTD を使用すると、Playhead コンポーネントを任意のレイアウト ボックスの子にできますが、実際には、その親のレイアウト ボックスが MediaControls または ChromelessControls 要素の子である場合にしか動作しません。
VolumeControl コンポーネントは、再生中の音量を調節する垂直スライダです。mediaController 属性は、メディアが再生されているコンポーネントを特定します（VideoDisplay、VideoPlayer、ChromelessVideoPlayer）。例は以下のとおりです。
<VolumeControl id="volumeControl" mediaController="{videoPlayer}" />
次に、一連のメディア コントロールの例を示します。MediaControls 要素の中に VolumeControl コンポーネントが含まれており、再生ボタン、プレイヘッド、および残り時間を示すラベルがあります。
<MediaControls id="controls" boxType="hbox"
width="300" height="116" vAlign="bottom"
padding="7" gutter="12" showBack="true">
<ToggleButton id="playButton" showBack="false"
iconName="play" toggledIconName="pause"
tooltip="controls play tooltip"
toggledTooltip="controls pause tooltip"
autoSize="true" iconAlignmentH="left"
click="{videoDisplay.play()}"
toggledClick="{videoDisplay.pause()}"
toggled="{videoDisplay.playing}"/>
<Playhead id="playhead" height="11"
mediaController="{videoDisplay}"/>
<Label width="31" height="20" vAlign="middle"
hAlign="left"
text="{format(videoDisplay.timeRemaining, MillisecondsTimecodeFormatter)}"/>
<VolumeControl id="volumeButton" showBack="false"
iconName="volume" mutedIconName="muted"
tooltip="mute tooltip" mutedTooltip="unmute tooltip"
width="22" height="17"
mediaController="{videoPlayer}"/>
</MediaControls>
BEML DTD を使用すると、VolumeControl コンポーネントを任意のレイアウト ボックスの子にできますが、実際には、その親のレイアウト ボックスが MediaControls または ChromelessControls 要素の子である場合にしか動作しません。
ToggleButton は、ラベル付きのクリック可能なグラフィックです。2 つの状態を切り替えることができます。オンおよびオフの状態に示す異なるグラフィック（アイコン）、ラベル、ツールチップ、およびクリック アクションを定義できます。
次に、VideoPlayer の標準的な [Play] ボタンを示します。
<ToggleButton id="playButton" showBack="false" iconName="play" toggledIconName="pause"
label="controls play" toggledLabel="controls pause"
tooltip="controls play tooltip" toggledTooltip="controls pause tooltip"
height="19" autoSize="true" lockHeight="true"
iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20"
click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}"
toggled="{videoPlayer.playing}"/>
iconName 属性はオフ状態の ToggleButton にグラフィックを割り当て、toggledIconName 属性はオン状態のグラフィックを割り当てます。iconName および toggledIconName で使用可能な値は、menu、play、pause、volume、maximize、minimize、share、link、code です。[Play] ボタンの例では、ToggleButton は、オフ状態のときに再生矢印アイコンを表示し、オン状態では一時停止アイコンを表示します。
click 属性は、オフ状態の ToggleButton がクリックされたときに呼び出される関数を定義します。また、toggledClick 属性は、オン状態の ToggleButton がクリックされたときに呼び出される関数を定義します。[Play] ボタンの例では、オフ状態の ToggleButton をクリックすると、VideoPlayer の play() 関数が呼び出されます。オン状態の ToggleButton をクリックすると、 VideoPlayer の pause() 関数が呼び出されます。
さまざまな属性により、ボタンのグラフィックの外観を変更できます。iconAlignmentH および iconAlignmentV は、ボタン内のアイコンの配置を制御し、iconScale を使用すると、アイコンのサイズを大きくしたり小さくしたりすることができます。
BEML DTD を使用すると、ToggleButton コンポーネントを任意のレイアウト ボックスの子にできますが、実際には、その親のレイアウト ボックスが MediaControls または ChromelessControls 要素の子である場合にしか動作しません。
LiveButton は特殊な用途に使用するトグル ボタンで、ライブ動画の DVR 配信に便利です。ライブ イベントをストリーミング配信しているときに、DVR のコントロール機能により、ライブ イベントの進行中も視聴者は巻き戻しをすることができ、重要部分を見直したり見逃したクリップをチェックすることができます。視聴者はプレーヤ コントロールの LiveButton を使用して、ストリームで一時停止や巻き戻しをした後でライブ アクションに戻ることができます。
ライブボタン機能は、ライブ DVR ストリームが、標準のプレーヤあるいは VideoPlayer または ChromelessVideoPlayer BEML コンポーネントを使用するカスタム プレーヤで再生されたとき、自動的に表示されます。LiveButton コンポーネントを使用して、ライブ ボタンをカスタム プレーヤ テンプレートのプレーヤ コントロールに追加できます。
詳しくは、完全な動作サンプルが含まれている「DVR によるライブ動画」または「カスタム クロームレス動画プレーヤを作成する」で LiveButton の使用についてご覧ください。
Label はシンプルなテキスト コンポーネントであり、プレーヤに任意のテキストを追加できます。このテキストを他の任意のコンポーネントのプロパティに動的にバインドして、現在再生している動画の名前の表示などを行うことができます。
<Label width="160" height="40"
text="{videoPlayer.video.displayName}" type="title"
hAlign="center" vAlign="middle" />
TitleLabel は Label コンポーネントの一種で、「selected」状態のレンダリングが可能です。選択されているアイテムを区別する必要があるリストの場合は役立ちます。TitleLabel のテキストは太字フォントで表示されます。
<TitleLabel width="100" height="20" text="{data.displayName}" />
GraphicBlock は、他の要素の後ろにスキンとして使用できる非対話型のグラフィックです。このリリースで、GraphicBlock が役立つのは、ChromelessVideoPlayer の内の要素の後ろにベタの背景を作成する場合のみです。
<GraphicBlock />
Image を使用すると、コンポーネントの scaleMode 属性に応じた大きさで、任意の JPG、GIF、または SWF をプレーヤにロードできます。
<Image width="200" height="120" scaleMode="exactFit"
source="http://myserver.com/logo.png" url="http://www.brightcove.com"
tooltip="Go to Brightcove." />
Link コンポーネントは、他の URL へのアクセスや JavaScript の呼び出しのために、クリック可能なテキストをプレーヤに表示する手段を提供します。
<Link height="40"
text="{videoPlayer.selectedItem.linkText}"
url="{videoPlayer.selectedItem.linkURL}" />
Button コンポーネントは、クリック可能なラベル付き画像を定義する手段を提供します。イベントをブロードキャストすることができます。
<Button width="80" height="20" label="詳細を見る..."
tooltip="Click to visit more videos." />
さまざまな属性により、ボタンのグラフィックの外観を変更できます。iconAlignmentH および iconAlignmentV は、ボタン内のアイコンの配置を制御し、iconScale を使用すると、アイコンのサイズを大きくしたり小さくしたりすることができます。
ThumbnailButton コンポーネントでは画像を表示します。視聴者が画像の上にカーソルを移動すると、ボタンは再生アイコンを表示します。click 属性には、画像をクリックしたときに実行する関数を指定します。source 属性には、表示する画像のパスを指定します。
<ThumbnailButton width="80" height="60"
source="{data.thumbnailURL}" />
List コンポーネントは、ListItems で構成される、縦方向のスクロール リストを提供します。各 ListItem では、その中に含める要素とレイアウトを指定します。ListItem には、VideoPlayer とリスト コンポーネントを除いて、サポートされている UI コントロール コンポーネントをどれでも含めることができます。List コンポーネントの最小サイズは 100 x 50 です。
<List id="playlist" rowHeight="60" automaticAdvance="true">
<ListItem id="videoItem" boxType="hbox" padding="5" gutter="10">
<ThumbnailButton width="67" height="50"
source="{currentItem.thumbnailURL}" click="{playlist.setSelectedIndex(index)}" />
<VBox gutter="5">
<TitleLabel width="225" height="25" vAlign="middle"
text="{currentItem.displayName}" size="18" truncate="true" />
<HBox gutter="10" height="20">
<Button autoSize="true" lockHeight="true"
label="PLAY" labelBuffer="5" click="{playVideo(currentItem)}" />
<Button autoSize="true" lockHeight="true"
label="SHARE" labelBuffer="5" click="{showEmailVideoMenu(currentItem)}" />
<Button autoSize="true" lockHeight="true"
label="GET LINK" labelBuffer="5" click="{showVideoLinkMenu(currentItem)}" />
</HBox>
</VBox>
</ListItem>
</List>
TileList は、ユーザー定義のリスト アイテムのグリッド リストです。TileList には ListItems が含まれており、各 ListItem には別のコンポーネントが含まれています。ListItem には、VideoPlayer とリスト コンポーネントを除いて、サポートされている UI コントロール コンポーネントをどれでも含めることができます。TileList コンポーネントの最小サイズは 100 x 50 です。例は以下のとおりです。
<TileList id="playlist" rowHeight="60" columnWidth="200" automaticAdvance="true">
<ListItem id="videoItem" boxType="hbox" padding="5" gutter="10">
<ThumbnailButton width="67" height="50"
source="{currentItem.thumbnailURL}" click="{playlist.setSelectedIndex(index)}" />
<VBox gutter="5">
<TitleLabel height="25" vAlign="middle" text="{currentItem.displayName}"
size="18" truncate="true" />
<HBox gutter="10" height="20">
<Button autoSize="true" lockHeight="true"
label="PLAY" labelBuffer="5" click="{playVideo(currentItem)}" />
<Button autoSize="true" lockHeight="true"
label="SHARE" labelBuffer="5" click="{showEmailVideoMenu(currentItem)}" />
<Button autoSize="true" lockHeight="true"
label="GET LINK" labelBuffer="5" click="{showVideoLinkMenu(currentItem)}" />
</HBox>
</VBox>
</ListItem>
</List>
ListItem は、List または TileList コンポーネント内に定義する必要があります。ListItem には、VideoPlayer と他のリスト以外であれば、サポートされているコンポーネントをどれでも含めることができます。例は以下のとおりです。
<ListItem id="videoItem" boxType="hbox"
padding="5" gutter="10">
<ThumbnailButton width="67" height="50"
source="{currentItem.thumbnailURL}" click="{playlist.setSelectedIndex(index)}" />
<VBox gutter="5">
<TitleLabel width="225" height="25" vAlign="middle"
text="{currentItem.displayName}" size="18" truncate="true" />
<HBox gutter="10" height="20">
<Button autoSize="true" lockHeight="true"
label="PLAY" labelBuffer="5" click="{playVideo(currentItem)}" />
<Button autoSize="true" lockHeight="true"
label="SHARE" labelBuffer="5" click="{showEmailVideoMenu(currentItem)}" />
<Button autoSize="true" lockHeight="true"
label="GET LINK" labelBuffer="5" click="{showVideoLinkMenu(currentItem)}" />
</HBox>
</VBox>
</ListItem>
プレーヤ テンプレート内の ListItem 要素では、index と currentItem という 2 つの特別な値を参照できます。index の値は、それぞれの ListItem の、リストにおける整数のインデックスです。currentItem の値は、List 要素における各 ListItem の dataProvider のインデックス位置にあるデータです。例えば、プレイリスト から List に VideoDTO が渡された場合、currentItem の値を通じて、各 ListItem およびすべてのサブ要素から、この VideoDTO を参照できます。ListItem では、ListItem 内のコンポーネントで関数呼び出しを可能にする、特別なグローバル関数も使用できます。詳細は、「ListItem から関数を呼び出す」を参照してください。
<ListItem>
<Image id="thumbnail" source="{currentItem.thumbnailURL}" />
</ListItem>
TabBar コンポーネントでは、水平にページが並んだタブを提供します。TabBar では、コレクションから 1 つを選択できます。TabBar でタブの数がコンポーネントのサイズを超える場合には、左右方向のナビゲーションが表示されます。任意で、TabBar ではロールオーバー時にドロップダウン リストを出現させるタブを表示できます。TabBar コンポーネントの最小サイズは 8 x 8 です。
<TabBar id="playlists" includeMenu="false"
selectedTabHeightOffset="0" />
ComboBox コンポーネントは、TabBar に似たナビゲーションを提供するドロップダウンによる選択コントロールです。ComboBox にはプレイリストのグループを割り当てることができるので、グループの中から 1 つのプレイリストを選択できます。または、1 つのプレイリストを割り当て、プレイリストの中から個々の動画を選択することも可能です。ComboBox は、TabBar や TileList などのような選択コントロール コンポーネントよりも、よりコンパクトなプレーヤ テンプレートを作成する場合に便利です。
ComboBox の id 属性は、ComboBox にプレイリストのリストが表示されるか、または 1 つのプレイリスト内の動画のリストが表示されるかを決定します。プレイリストのリストを表示するには、id="playlistCombo" を使用します。単一のプレイリストの動画のリストを表示するには、id="videoCombo" を使用します。
次の例では、ComboBox には、プレイリストのリストが表示されます。
<ComboBox id="playlistCombo" height="40" width="40" />
次の例では、ComboBox をリストにバインドする方法を示します。
<ComboBox id="playlistCombo" height="25"/>
<List id="videoList" rowHeight="75" automaticAdvance="true"
data="{playlistCombo.selectedItem.videoDTOs}" itemLeading="2">
<ListItem boxType="hbox">
...
</ListItem>
</List>
見た目を整えるためのコンポーネントで、他のコンポーネント間のスペースを作ります。例は以下のとおりです。
<Spacer id="smallSpace" height="10" />
Banner は、プレーヤに広告機能を追加します。Banner 要素を追加すると、新しいフォーマットが許可されて広告サーバー呼び出しすべてに付加され、バナー表示が可能であることが広告サーバーに通知されます。バナーのサイズでサポートされる広告フォーマットが決まるため、468 x 60 バナー要素では、デフォルトで 468 x 60 バナーの広告フォーマットがサポートされます。他の広告フォーマットも指定できるため、大きなバナー領域で小さなサイズのバナーを複数利用することもできます。大きな領域内でのバナーの縮尺や整列は、Banner の属性で制御します。
<Banner width="468" height="60" />
ExpandingBanner は、プレーヤに広告機能を追加します。ExpandingBanner 要素を追加すると、2 つの新しいフォーマットが許可されて広告サーバー呼び出しすべてに付加され、バナー表示が可能であることが広告サーバーに通知されます。バナーのサイズでサポートされる広告フォーマットが決まるため、468 x 60 バナー要素ではデフォルトで、468 x 60 バナーの広告フォーマットと 468 x 60 の同期バナー ユニットがサポートされます。他の広告フォーマットも指定できるため、大きなバナー領域で小さなサイズのバナーを複数利用することもできます。大きな領域内でのバナーの縮尺や整列は、属性で制御します。
「エキスパンド バナー コンポーネントを使用する」では、広告コンテキストで ExpandingBanner を使用する詳細な例を示しています。
<ExpandingBanner width="468" height="60"
expandedHeight="360" expandedOffsetY="-50"
disableOnExpand="list" />
SWFLoader コンポーネントでは、カスタム開発した SWF をプレーヤにロードし、配置とサイズを指定できます。カスタム コンポーネントは、ActionScript 3 および Video Cloud Flash 専用プレーヤ API を使用して開発することができます。ActionScript 2 SWF は、プレーヤと連動できないので注意してください。ロードされた SWF にランタイム API へのハンドルを渡し、イベントを待機したり他のプレーヤと連動したりできるようにするには、次のメソッド シグネチャで定義されたインターフェイスを実装する必要があります。
function setInterface(obj:Object):void;
例：
function setInterface(player:Object):void {
mPlayer = player;
var experienceModule:Object = mPlayer.getModule("experience");
if (experienceModule) {
experienceModule.addEventListener("templateReady", onTemplateReady);
}
}
SWFLoader 要素は、Module 要素と似ています。どちらもカスタム SWF をロードします。SWFLoader はレイアウト コンポーネントまたは ListItem 内に配置可能で、サイズと位置の属性があるため、プレーヤ内に表示するカスタム コンポーネントに最適です。SWFLoader コンポーネントのロードは非同期に行われます。プレーヤは、コンポーネントのロードが完了するのを待たずに、動画コンテンツをロードします。Module 要素は、レイアウト コンポーネントの子要素にはできないため、プレーヤ内に表示しないカスタム コンポーネントへの使用に最適です。詳細については、「カスタム プレーヤ コンポーネントを作成する」を参照してください。
SWFLoader 要素には、カスタム SWF の URL（ブライトコーブ以外でホストする必要があります）と、プレーヤ レイアウト内にレンダリングするときのカスタム コンポーネントのサイズを指定する属性があります。例は以下のとおりです。
<SWFLoader width="300" height="220" source="http://www.myserver/mySWF.swf" />
プレーヤ テンプレートを構成する要素の詳細については、以下を参照してください。