サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    概要:コンポーネント

    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 シーク、ロードの進行状況、および再生の進行状況バーを含むコンポーネント
    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(){
      ...
    })

    ページの最終更新日:28年2020月XNUMX日