プレーヤ テンプレートの例

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

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

このトピックではプレーヤ レンプレートの例をいくつか紹介し、BEML を使用して、新しいプレーヤ テンプレートをカスタマイズしたり、まったく新しいプレーヤ テンプレートを作成する方法を説明します。以下のプレーヤ テンプレートの例を紹介します。

各標準プレーヤ テンプレートの BEML を zip ファイルとしてダウンロードできます。

シングル動画プレーヤ

はじめに、標準の Brightcove プレーヤ テンプレートの 1 つである Video Player 3.0 を見てみましょう。これはシンプルなシングル動画プレーヤです。このプレーヤ テンプレートを定義した BEML は以下のとおりです。

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

Theme 要素で、テーマは Deluxe、スタイルは Light と設定しています。Layout 要素にはレイアウト ボックスが 1 つあり（Vbox）、さらにその中にはコンポーネントが 1 つあります（VideoPlayer）。VideoPlayer コンポーネントは、動画ウィンドウと、標準の Brightcove メディア コントロール一式で構成されています。シンプルなプレーヤの定義に必要なのは以上です。

ローカライズしたプレーヤ

それでは、Brightcove が定義したこのシンプルなプレーヤをもとに、コントロールのラベルの変更が簡単にできることを確認しましょう。再生ボタンを [Play] ではなく [Go!] にしたいとします。以下の行を追加して、再生ボタンのテキストをオーバーライドします。

<label key="controls play">Go!</label>

この行を Labels 要素に追加すると、プレーヤ テンプレートは以下のようになります。

<Runtime>
  <Theme name="Deluxe" style="Light" />
<Labels>     <label key="controls play">Go!</label>   </Labels> 
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

プレーヤ コントロールをポップな再生ボタンではなく、たとえばフランス語など、他の言語にしたいとします。その場合は Labels 要素に、プレーヤの各ラベルに対するフランス語テキストを指定するラベル設定ファイルの URL を設定するだけです。

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Labels file="http://admin.brightcove.co.jp/bc3_examples/fr_player_labels.xml" /> 
  <Layout width="486" height="416">
    <VBox padding="3">
      <VideoPlayer id="videoPlayer" />
    </VBox>
  </Layout>
</Runtime>

もちろん、Publishing モジュールにある [Edit Settings] ダイアログの [Language Options] タブでフランス語、ドイツ語、イタリア語、日本語、スペイン語をラベルとして簡単に設定できます。しかし、この例で紹介している方法では、ほぼあらゆる言語によるプレーヤのローカライズが可能です。

Compact Tabbed Navigation 3.0 プレーヤ

次の例では、もう少し複雑なプレーヤ テンプレートを見てみましょう。Compact Tabbed Navigation 3.0 プレーヤです。このプレーヤでは、視聴者がプレイリスト領域の上部にあるタブを選択して、複数のプレイリスト間で切り替えをすることができます。右側のスクロール リストには、各動画の短い説明文とサムネイルが表示されます。以下の要素がプレーヤ テンプレートに追加されています。

  1. Image と TabBar のある HBox。TabBar ではプレイリストのタブを表示します。 
    <HBox height='40' vAlign='bottom' gutter='9'>
  <Image id='logo' width='300' scaleMode='scaleDown' hAlign='left' vAlign='bottom' />
  <TabBar id='playlistTabs' height='22' tabAlign='right' hideSingleTab='true' />
</HBox>
  2. VideoPlayer と List のある HBox。VideoPlayer では、プレイリストで選択されたアイテムを再生します。List にはプレイリストのアイテムを表示します。 
    <HBox height='406' gutter='6'>
  <VideoPlayer id='videoPlayer' width='480' video='{videoList.selectedItem}' />
  <List id='videoList' rowHeight='78' automaticAdvance='true'
           data='{playlistTabs.selectedItem.videoDTOs}'
           selectOnClick='true' itemInsetV='4' itemLeading='2'>
    <ListItem boxType='hbox'>
          ...
    </ListItem>
  </List>
</HBox>
  3. 各 ListItem には 2 つの VBox が含まれています。1 つはプレイリストの動画のサムネイル画像が付いた ThumbnailButton を表示し、もう 1 つは動画の名前と短い説明を表示します。 
    <List id='videoList' rowHeight='78' automaticAdvance='true'
           data='{playlistTabs.selectedItem.videoDTOs}'
           selectOnClick='true' itemInsetV='4' itemLeading='2'>
  <ListItem boxType='hbox'>
      <Spacer width='8' />
      <VBox width='80' height='74' vAlign='middle'>
          <ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' />
      </VBox>
      <Spacer width='7' />
      <VBox>
        <Spacer height='3' />
        <TitleLabel height='18' text='{currentItem.displayName}' truncate='true' />
        <Label multiline='true' text='{currentItem.shortDescription}' truncate='true' />
      </VBox>
      <Spacer width='3' />
    </ListItem>
  </ListItem>
</List>
  4. Layout 内の最後の要素は VBox で、その中には 2 つの HBox があります。1 個目の HBox には、現在 VideoPlayer にロードされている動画の名前の TitleLabel と、動画に割り当てられた URL の Link を表示します。 
    <VBox gutter='15'>
  <HBox height='32'>
    <Spacer width='6' />
    <VBox>
      <TitleLabel height='24' width='765' text='{videoPlayer.video.displayName}' 
        selected='true' size='18' truncate='true' />
      <Canvas>
        <Link x='1' y='-5' size='10' text='{videoPlayer.video.linkText}' 
                 vAlign='bottom' url='{videoPlayer.video.linkURL}' />
      </Canvas>
    </VBox>
  </HBox>
  ...
</VBox>
  5. 2 個目の HBox では Image と ExpandingBanner を表示します。このテンプレートでは、Image にも ExpandingBanner にもコンテンツを割り当てていません。 
    <VBox gutter='15'>
    ...
  <HBox width='757' hAlign='right'>
    <Canvas width='728'>
      <Image id='bottomImage' width='728' height='90' scaleMode='scaleDown' />
      <ExpandingBanner id='banner' expandedHeight='405' 
                          width='728' height='90' expandedWidth='299' buttonWidth='90'
                          expandedOffsetY='-52' expandedOffsetX='458'
                          disableOnExpand='playlistTabs,videoList' />
    </Canvas>
  </HBox>
</VBox>

これが、Compact Tabbed Navigation 3.0 プレーヤのプレーヤ テンプレート全体です。

 
<Runtime>
 
  <Theme name='Deluxe' style='Light'>
    <Style id='default'>
      <![CDATA[.titleText {size: 12;}.bodyText {size: 10;}.linkText {size: 10;}]]>
    </Style>
  </Theme>
  
  <Layout id='application' width='798' height='603' boxType='vbox' padding='6' gutter='4'>
    <HBox height='40' vAlign='bottom' gutter='9'>
      <Image id='logo' width='300' scaleMode='scaleDown' hAlign='left' vAlign='bottom' />
      <TabBar id='playlistTabs' height='22' tabAlign='right' hideSingleTab='true' />
    </HBox>
 
    <HBox height='406' gutter='6'>
      <VideoPlayer id='videoPlayer' width='480' video='{videoList.selectedItem}' />
      <List id='videoList' rowHeight='78' automaticAdvance='true'
               data='{playlistTabs.selectedItem.videoDTOs}'
               selectOnClick='true' itemInsetV='4' itemLeading='2'>
        <ListItem boxType='hbox'>
          <Spacer width='8' />
          <VBox width='80' height='74' vAlign='middle'>
            <ThumbnailButton height='60' data='{currentItem}' source='{currentItem.thumbnailURL}' />
          </VBox>
          <Spacer width='7' />
          <VBox>
            <Spacer height='3' />
            <TitleLabel height='18' text='{currentItem.displayName}' truncate='true' />
            <Label multiline='true' text='{currentItem.shortDescription}' truncate='true' />
          </VBox>
          <Spacer width='3' />
        </ListItem>
      </List>
  </HBox>
  <VBox gutter='15'>
    <HBox height='32'>
      <Spacer width='6' />
      <VBox>
        <TitleLabel height='24' width='765' text='{videoPlayer.video.displayName}'
           selected='true' size='18' truncate='true' />
        <Canvas>
          <Link x='1' y='-5' size='10' text='{videoPlayer.video.linkText}' 
                   vAlign='bottom' url='{videoPlayer.video.linkURL}' />
        </Canvas>
      </VBox>
    </HBox>
    <HBox width='757' hAlign='right'>
      <Canvas width='728'>
        <Image id='bottomImage' width='728' height='90' scaleMode='scaleDown' />
        <ExpandingBanner id='banner' expandedHeight='405' 
                            width='728' height='90' expandedWidth='299' buttonWidth='90'
                            expandedOffsetY='-52' expandedOffsetX='458'
                            disableOnExpand='playlistTabs,videoList' />
      </Canvas>
    </HBox>
  </VBox>
  </Layout>
</Runtime>
タグ
サンプル