サポートに連絡する| システムステータス
ページコンテンツ

    概要:コンポーネント

    The Brightcove Player is built on top of a simple, custom UI components architecture. This topic provides a brief insight into the components and their structure. This is an overview document. For information about changing the components please see the の外観ドキュメントをカスタマイズします。

    ラベルの付いたコンポーネント

    以下は、プレーヤーのロード、ビデオ再生時のスクリーンショットです。コンポーネントには、ラベルが付いています。

    プレイヤーのロードとホバー時

    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
    

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

    elements in dev tools

    定義

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

    コンポーネント 説明
    posteriMage ビデオの再生が開始されるまで表示される画像
    TextTrackDisplay キャプションと字幕に使用される別のトラックとして表示されるテキスト (WebVTT 形式)
    loadingSpinner ビデオがロードされるまで表示されるアニメーションスピンホイール
    BigPlayButton ロード時にボタンの領域内に表示される再生ボタン
    コントロールバー すべてのメインプレーヤーコントロールのコンテナ
        プレイトグル 再生と一時停止を切り替える再生ボタン
        ミュートトグル オーディオをミュートしたかしないか切り替えるボタン
             volumeControl 音量レベルを制御するスライダバー
                VolumeLevel ボリュームバーの上にマウスポインタを置いたときの現在の音量レベルを表示します
                    VolumeHandle ボリュームレベルの現在の位置を表示し、ドラッグして音量レベルを調整できます
        現在の時刻表示 再生されたビデオの現在の再生時間 (mm: ss)
         timedivider ' 現在のデュレーションとビデオの再生時間を区切るスラッシュ '/
        デュレーション表示 ビデオの全体的な再生時間
         ProgressControl シーク、ロードプログレスバー
             SeekBar メディアがフェッチされたというイベントを受信するとアクティブになるメディアバー
             LoadProgressBar 取得中のビデオの進行を示します
             PlayProgressBar 再生中のビデオの進行を示します
             SeekHandle 再生中の再生ヘッドの現在の位置を表示し、ドラッグして再生ヘッドを調整できます
         LiveControl ライブフィードをストリーミングする場合は、「LIVE」という単語を表示します
         remainingTimeDisplay まだ再生されていないビデオの再生時間を表示します
        スペーサー 特にアイコンを追加するためのコントロールバーに挿入された要素
         PlaybackRate 再生レートを表示します
         ChaptersButton チャプターを表示するボタン
        キャプションボタン キャプション設定フォームを表示するには切り替えます
        全画面切り替え 全画面表示を切り替えるボタン
    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 プレーヤーのコントロールなどのユーザーインターフェイス全体を簡単に構築できます。子コンポーネントを追加すると、その子の要素が親の要素に挿入され、次の図に示すように、必要に応じてその要素を操作できます。

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

    ページの最終更新日30 Sep 2021