概要：コンポーネント

Brightcove Player は、シンプルなカスタムUIコンポーネントアーキテクチャの上に構築されています。このトピックでは、コンポーネントとその構造について簡単に説明します。

これは概要文書です。コンポーネントの変更については、カスタマイズ Player 外観の資料をご参照ください。

ラベルされたコンポーネント

以下は、のスクリーンショットです player、オン player 読み込み、動画の再生時に、コンポーネントにラベルを付けます。

On player ロードとホバー

再生中

これらのコンポーネントのCSSセレクタの詳細については、 カスタマイズ Player 外観 書類コンポーネントセレクタの項目を検索します。

階層構造

のデフォルトの階層コンポーネント構造 player 示されているとおりです：

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

また、コンポーネントの構造を表示することもできます。要素ブラウザのDev Toolsのタブをクリックします。以下のスクリーンショットの要素が表示されます。たとえば、黄色で強調表示されているのは、ControlBarの子要素です。

定義

主要コンポーネントの定義は、次の表に示されています。

成分	説明
PosterImage	動画が再生されるまで表示される画像
TextTrackDisplay	キャプションと字幕に使用される別のトラックとして表示されるテキスト（WebVTT形式）
Loading Spinner	ビデオがロードされるまで表示されるアニメーションスピンホイール
BigPlayButton	ロード時にボタンの領域内に表示される再生ボタン
コントロールバー	すべてのメインのコンテナー player controls
PlayToggle	再生と一時停止を切り替える再生ボタン
ミュートトグル	ミュートされていないオーディオを切り替えるボタン
音量調節	ボリュームレベルをコントロールするスライダーバー
VolumeLevel	ボリュームバーの上にマウスを移動すると現在の音量レベルが表示されます
VolumeHandle	音量レベルの現在の位置を表示し、音量を調整するためにドラッグすることができます
CurrentTimeDisplay	再生されたビデオの現在の再生時間はmm：ssで表示されます
TimeDivider	現在の期間とビデオの期間を分けるスラッシュ「/」
DurationDisplay	ビデオの全体的な長さ
ProgressControl	シーク、ロードの進行状況、および再生の進行状況バーを含むコンポーネント次のように使用して、progressControlとその子とのビューアのやり取りをオフにすることができます。 `player.controlBar.progressControl.disable();`
SeekBar	メディアが取得されたというイベントを受信するとアクティブになるメディアバー
LoadProgressBar	フェッチされているビデオの進行を示します。
PlayProgressBar	再生中のビデオの進行を示します。
SeekHandle	再生中に再生ヘッドの現在の位置を表示し、ドラッグして再生ヘッドを調整することができます
Liveコントロール	単語を表示するライブライブフィードをストリーミングする場合
RemainingTimeDisplay	再生されていないビデオの再生時間を表示します。
スペーサ	特にアイコンを追加するためにコントロールバーに挿入された要素
再生率	再生速度を表示します。
チャプターボタン	章を表示するボタン
CaptionsButton	キャプション設定フォームを表示するように切り替えます
フルスクリーントグル	フルスクリーン表示を切り替えるボタン
CaptionsSettings	キャプションの設定を表示および変更するフォーム
DockText	タイトルと説明のためのコンテナ
DockTitle	ビデオのタイトル
DockDescription	ビデオの簡単な説明
DockShelf	ソーシャルメディアプラグインで使用されます

クラス情報

player クラス、およびすべてのコントロールクラスは、ComponentクラスまたはComponentのサブクラスから継承します。

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

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

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