概要:コンポーネント

製品(複数可)
Brightcove Player
ビデオクラウド
役割
プレーヤー開発者
トピック)
アーキテクチャ

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

これは概要文書です。 コンポーネントの変更については、 プレーヤーの外観をカスタマイズする 資料。

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

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

プレーヤーの負荷とホバーで

負荷のコンポーネント

再生中

コンポーネントの再生

これらのコンポーネントのCSSセレクタの詳細については、 プレーヤーの外観をカスタマイズする 書類 コンポーネントセレクタ セクション。

階層構造

 

プレーヤのデフォルトの階層的なコンポーネント構造は、次のようになります。

プレーヤープレイヤーPosterImage TextTrackDisplay DockText DockTitle DockDescription DockShelf LoadingSpinner BigPlayButtonのControlBar PlayToggle VolumePanelHorizo​​ntal MuteToggle VolumeControlにVolumeBarのVolumeLevel CurrentTimeDisplay TimeDivider DurationDisplay ProgressControl ProgressHolderシークバーLoadProgressBar PlayProgressBar SeekHandle LiveControl RemainingTimeDisplayスペーサーPlaybackRate ChaptersButton DescriptionsButton SubtitlesCaptionsButton AudioTrackButton FullscreenToggle ErrorDisplayModal ModalDialog InfoModal

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

開発ツールの要素

定義

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

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