概要:コンポーネント
これは概要文書です。 コンポーネントの変更については、 監視 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制御 | 単語を表示する LIVE ストリーミングする場合 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(){
...
})