概要: コンポーネント

Brightcove Player は、シンプルでカスタム可能な UI コンポーネント アーキテクチャを基盤として構築されています。このトピックでは、コンポーネントとその構造について簡単に説明します。本ドキュメントは概要を示すものです。コンポーネントの変更方法については、プレーヤーの外観をカスタマイズ ドキュメントを参照してください。

ラベル付きコンポーネント

以下は、プレーヤーの読み込み時および動画再生時のスクリーンショットで、各コンポーネントにラベルを付けたものです。

プレーヤー読み込み時およびホバー時

components on load

再生中

components playback

これらのコンポーネントに対応する CSS セレクターについては、プレーヤーの外観をカスタマイズ ドキュメント内の コンポーネント セレクター セクションを参照してください。

階層構造

 

プレーヤーのデフォルトの階層型コンポーネント構造は、次のとおりです。

  Player
    Player
        PosterImage
        TextTrackDisplay
        DockText
          DockTitle
          DockDescription
        DockShelf
        LoadingSpinner
        BigPlayButton
        ControlBar
          PlayToggle
          VolumePanelHorizontal
            MuteToggle
            VolumeControl
              VolumeBar
                VolumeLevel
          CurrentTimeDisplay
          TimeDivider
          DurationDisplay
          ProgressControl
            ProgressHolder
            SeekBar
            LoadProgressBar
            PlayProgressBar
            SeekHandle
          LiveControl
          RemainingTimeDisplay
          Spacer
          PlaybackRate
          ChaptersButton
          DescriptionsButton
          SubtitlesCaptionsButton
          AudioTrackButton
          FullscreenToggle
        ErrorDisplayModal
        ModalDialog
        InfoModal

また、ブラウザーの開発者ツールにある Elements タブを表示することで、コンポーネントの構造を確認することもできます。以下のスクリーンショットでは、要素が表示されています。例えば、黄色でハイライトされている部分は ControlBar の子要素です。

elements in dev tools

定義

主要なコンポーネントの定義を次の表に示します。

コンポーネント 説明
PosterImage 動画の再生が開始されるまで表示される画像
TextTrackDisplay キャプションや字幕用に使用される、独立したトラックとして表示されるテキスト（WebVTT 形式）
LoadingSpinner 動画が読み込まれるまで表示されるアニメーションのスピナー
BigPlayButton 読み込み時に表示される大きな再生ボタン
ControlBar すべての主要なプレーヤー コントロールを含むコンテナ
    PlayToggle 再生と一時停止を切り替える再生ボタン
    MuteToggle オーディオのミュートとミュート解除を切り替えるボタン
        VolumeControl 音量レベルを制御するスライダーバー
            VolumeLevel 音量バーにマウスオーバーした際に、現在の音量レベルを表示
                VolumeHandle 現在の音量レベルの位置を示し、ドラッグして音量を調整可能
    CurrentTimeDisplay 再生中の動画の現在時刻を mm:ss 形式で表示
    TimeDivider 現在の再生時間と動画の総再生時間を区切るスラッシュ「/」
    DurationDisplay 動画の総再生時間
    ProgressControl シークバー、ロード進捗バー、再生進捗バーを含むコンポーネント
        SeekBar メディアが取得されたイベントを受信すると有効になるメディアバー
        LoadProgressBar 動画の読み込み進捗状況を示します
        PlayProgressBar 動画の再生進捗状況を示します
        SeekHandle 再生中の再生ヘッドの現在位置を示し、ドラッグして位置を調整可能
    LiveControl ライブ配信中の場合に LIVE と表示
    RemainingTimeDisplay 未再生の残り再生時間を表示
    Spacer 主にアイコン追加のために ControlBar に挿入される要素
    PlaybackRate 再生速度を表示
    ChaptersButton チャプターを表示するためのボタン
    CaptionsButton キャプション設定フォームを表示するための切り替えボタン
    FullScreenToggle 全画面表示を切り替えるボタン
CaptionsSettings キャプション設定を表示および変更するためのフォーム
DockText タイトルと説明のコンテナ
    DockTitle 動画のタイトル
    DockDescription 動画の簡単な説明
DockShelf ソーシャルメディアプラグインで使用されます

クラス情報

プレーヤー クラスおよびすべてのコントロール クラスは、Component クラス、または Component のサブクラスを継承しています。

    videojs.Control = videojs.Component.extend();
    videojs.Button = videojs.Control.extend();
    videojs.PlayToggle = videojs.Button.extend();

UI コンポーネント アーキテクチャにより、親コンポーネントに子コンポーネントを追加し、Video.js プレーヤーのコントロールのような完全なユーザー インターフェイスを構築しやすくなります。子コンポーネントを追加すると、その要素が親の要素内に挿入され、次の例のように必要に応じて要素を操作できます。

    myButton = myPlayer.controlBar.addChild('Button');
    myButton.addClass('bc-download-button');
    myButton.on('click',function(){
      ...
    })