MediaControls の例

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

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

VideoPlayer コンポーネントには、標準の Brightcove メディア コントロール一式が含まれます。再生/一時停止スイッチ、タイムライン スクラバ、ボリューム調整、最大化/最小化コントロール、メニュー アクセス ボタンなどのコントロールがあります。BEML には、カスタム メディア コントロール コンポーネントを作成できるメディア コントロール コンポーネントも含まれています。このトピックでは、これらのコンポーネントの使用方法を示すプレーヤ テンプレートの例を紹介します。

AdvertisingContext コンポーネントを参照するために、これらの例がどのように adContext id を使用しているかに注意してください。これにより、MediaControls は、デフォルトでプレーヤの広告と連携できます。このテンプレートから作成したプレーヤに広告を配信したい場合、このように Media Controls プレーヤ テンプレートをセットアップする必要があります。下のように適切な adContext パラメータを使わなければ、このテンプレートから作成されるプレーヤで広告がうまく機能しません。広告を利用するか分からない場合でも、このテンプレートから始めることをお勧めします。プレーヤで広告が有効になっているかどうかに関わらず、プレーヤは動作するからです。

メディア コントロールを備えた動画プレーヤ

次の例は、MediaControls BEML 要素を使用し、配達の配信を全面的にサポートする完全なカスタム プレーヤ テンプレートを示します。これは基礎的な VideoPlayer テンプレートですが、VideoPlayer コンポーネントの代わりに VideoDisplay および MediaControls を使用しています。

プレーヤ

 

テンプレート

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Layout boxType="vbox" padding="3" width="486" height="412">
    <VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
    <MediaControls id="mediaControls" height="46">
      <HBox width="460" height="12" x="10" y="5" gutter="21">
        <Label visible="{adContext.playheadVisible}" width="31" height="11" 
               vAlign="middle" hAlign="right" 
               text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}" />
        <VBox>
          <Spacer height="1" />
          <Playhead visible="{adContext.playheadVisible}" mediaController="{videoPlayer}" />
        </VBox>
        <Label visible="{adContext.playheadVisible}" width="31" height="11" 
               vAlign="middle" 
               text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" />
      </HBox>
      <HBox width="465" height="19" x="5" y="25" gutter="10">
        <ToggleButton visible="{adContext.playPauseVisible}" width="60" showBack="false" 
                      iconName="play" toggledIconName="pause" 
                      label="controls play" toggledLabel="controls pause" 
                      tooltip="controls play tooltip" toggledTooltip="controls pause tooltip" 
                      height="19" autoSize="false" lockHeight="true"  
                      iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20" 
                      click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" 
                      toggled="{videoPlayer.playing}"/>
        <Spacer />
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="share" 
                label="community share" tooltip="community share tooltip" 
                height="19" autoSize="true" lockHeight="true" 
                iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="21" 
                data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Email', data)}"/>
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="link" 
                label="community link" tooltip="community link tooltip" 
                height="19" autoSize="true" lockHeight="true" 
                iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="21" 
                data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Link', data)}"/>
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="code" 
                label="community code" tooltip="community code tooltip" 
                height="19" autoSize="true" lockHeight="true" 
                iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="21" 
                data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Embed', data)}"/>
        <Spacer />
        <Button visible="{adContext.maximizeVisible}" showBack="false" 
                iconName="maximize" tooltip="controls maximize tooltip" 
                width="19" height="17" click="{videoPlayer.goFullScreen()}"/>
        <Button visible="{adContext.volumeVisible}" showBack="false" 
                iconName="volume" tooltip="controls volume tooltip" 
                width="19" height="17" click="{videoPlayer.toggleVolumeControls()}"/>
        <Button visible="{adContext.menuVisible}" showBack="false" 
                iconName="menu" label="controls menu" height="19" autoSize="true" 
                lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="19" 
                data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Info', data)}"/>
      </HBox>
      <Label visible="{adContext.sponsorMessageVisible}" x="9" y="5" text="sponsor message"/>
      <Label visible="{adContext.timePositionVisible}" x="439" y="5" width="31" height="11" 
             vAlign="middle" hAlign="right" 
             text="{format(videoPlayer.positiveTimeRemaining, SecondsTimecodeFormatter)}" />
    </MediaControls>
  </Layout>
</Runtime>

VolumeControl を備えた動画プレーヤ

これは基礎的な VideoPlayer テンプレートですが、VideoPlayer コンポーネントの代わりに VideoDisplay および MediaControls を使用しています。さらに、内蔵ボリューム スライダの代わりに VolumeControl コンポーネントを使用しています。

プレーヤ

 

テンプレート

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Layout boxType="vbox" padding="3" width="486" height="412">
    <VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
    <MediaControls id="mediaControls" height="46">
      <HBox width="460" height="12" x="10" y="5" gutter="21">
        <Label visible="{adContext.playheadVisible}" width="31" height="11" 
               vAlign="middle" hAlign="right" 
               text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}" />
        <VBox>
          <Spacer height="1" />
          <Playhead visible="{adContext.playheadVisible}" mediaController="{videoPlayer}" />
        </VBox>
        <Label visible="{adContext.playheadVisible}" width="31" height="11" vAlign="middle" 
               text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" />
      </HBox>
      <HBox width="465" height="19" x="5" y="25" gutter="10">
        <ToggleButton visible="{adContext.playPauseVisible}" width="60" showBack="false" 
                      iconName="play" toggledIconName="pause" 
                      label="controls play" toggledLabel="controls pause" 
                      tooltip="controls play tooltip" toggledTooltip="controls pause tooltip" 
                      height="19" autoSize="false" lockHeight="true" 
                      iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20" 
                      click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" 
                      toggled="{videoPlayer.playing}"/>
        <Spacer />
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="share" 
                label="community share" tooltip="community share tooltip" height="19" 
                autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" 
                labelOffsetX="21" data="{videoPlayer.video}" 
                click="{videoPlayer.toggleMenuPage('Email', data)}"/>
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="link" 
                label="community link" tooltip="community link tooltip" height="19" 
                autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" 
                labelOffsetX="21" data="{videoPlayer.video}" 
                click="{videoPlayer.toggleMenuPage('Link', data)}"/>
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="code" 
                label="community code" tooltip="community code tooltip" height="19" 
                autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" 
                labelOffsetX="21" data="{videoPlayer.video}" 
                click="{videoPlayer.toggleMenuPage('Embed', data)}"/>
        <Spacer />
        <Button visible="{adContext.maximizeVisible}" showBack="false" iconName="maximize" 
                tooltip="controls maximize tooltip" width="19" height="17" 
                click="{videoPlayer.goFullScreen()}"/>
        <VolumeControl id="volumeButton" visible="{adContext.volumeVisible}" showBack="false" 
                       iconName="volume" mutedIconName="muted" 
                       tooltip="mute tooltip" mutedTooltip="unmute tooltip" 
                       width="22" height="17" mediaController="{videoPlayer}"/>
        <Button visible="{adContext.menuVisible}" showBack="false" iconName="menu" 
                label="controls menu" height="19" autoSize="true" lockHeight="true" 
                iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="19" 
                data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Info', data)}"/>
      </HBox>
      <Label visible="{adContext.sponsorMessageVisible}" x="9" y="5" text="sponsor message"/>
      <Label visible="{adContext.timePositionVisible}" x="439" y="5" width="31" height="11" 
             vAlign="middle" hAlign="right" 
             text="{format(videoPlayer.positiveTimeRemaining, SecondsTimecodeFormatter)}" />
    </MediaControls>
  </Layout>
</Runtime>

ToggleButton Mute を備えた動画プレーヤ

これは基礎的な VideoPlayer テンプレートですが、VideoPlayer コンポーネントの代わりに VideoDisplay および MediaControls を使用しています。さらに、ミュートにはボリューム スライダの代わりに ToggleButton を使用しています。

プレーヤ

 

テンプレート

<Runtime>
  <Theme name="Deluxe" style="Light" />
  <Layout boxType="vbox" padding="3" width="486" height="412">
    <VideoDisplay id="videoPlayer" showBack="true" includeFullscreenControls="true"/>
    <MediaControls id="mediaControls" height="46">
      <HBox width="460" height="12" x="10" y="5" gutter="21">
        <Label visible="{adContext.playheadVisible}" width="31" height="11" 
               vAlign="middle" hAlign="right" 
               text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}" />
        <VBox>
          <Spacer height="1" />
          <Playhead visible="{adContext.playheadVisible}" mediaController="{videoPlayer}" />
        </VBox>
        <Label visible="{adContext.playheadVisible}" width="31" height="11" 
               vAlign="middle" 
               text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" />
      </HBox>
      <HBox width="465" height="19" x="5" y="25" gutter="10">
        <ToggleButton visible="{adContext.playPauseVisible}" width="60" showBack="false" 
                      iconName="play" toggledIconName="pause" 
                      label="controls play" toggledLabel="controls pause"
                      tooltip="controls play tooltip" toggledTooltip="controls pause tooltip" 
                      height="19" autoSize="false" lockHeight="true" 
                      iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="20" 
                      click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" 
                      toggled="{videoPlayer.playing}"/>
        <Spacer />
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="share" 
                label="community share" tooltip="community share tooltip" height="19" 
                autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" 
                labelOffsetX="21" data="{videoPlayer.video}" 
                click="{videoPlayer.toggleMenuPage('Email', data)}"/>
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="link"
                label="community link" tooltip="community link tooltip" height="19" 
                autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" 
                labelOffsetX="21" data="{videoPlayer.video}" 
                click="{videoPlayer.toggleMenuPage('Link', data)}"/>
        <Button visible="{adContext.menuOptionsVisible}" showBack="false" iconName="code" 
                label="community code" tooltip="community code tooltip" height="19" 
                autoSize="true" lockHeight="true" iconAlignmentH="left" labelAlignmentH="left" 
                labelOffsetX="21" data="{videoPlayer.video}" 
                click="{videoPlayer.toggleMenuPage('Embed', data)}"/>
        <Spacer />
        <Button visible="{adContext.maximizeVisible}" showBack="false" iconName="maximize" 
                tooltip="controls maximize tooltip" width="19" height="17" 
                click="{videoPlayer.goFullScreen()}"/>
        <ToggleButton visible="{adContext.volumeVisible}" showBack="false" iconName="volume" 
                      toggledIconName="muted" toggledTooltip="Unmute" tooltip="Mute" 
                      width="19" height="17" click="{videoPlayer.mute(true)}" 
                      toggledClick="{videoPlayer.mute(false)}" toggled="{videoPlayer.muted}"/>
        <Button visible="{adContext.menuVisible}" showBack="false" iconName="menu" 
                label="controls menu" height="19" autoSize="true" lockHeight="true" 
                iconAlignmentH="left" labelAlignmentH="left" labelOffsetX="19" 
                data="{videoPlayer.video}" click="{videoPlayer.toggleMenuPage('Info', data)}"/>
      </HBox>
      <Label visible="{adContext.sponsorMessageVisible}" x="9" y="5" text="sponsor message"/>
      <Label visible="{adContext.timePositionVisible}" x="439" y="5" width="31" height="11" 
             vAlign="middle" hAlign="right" 
             text="{format(videoPlayer.positiveTimeRemaining, SecondsTimecodeFormatter)}" />
    </MediaControls>
  </Layout>
</Runtime>