カスタマイズ Player 外観
独自のスキンを作成する
デフォルトのスキンを使用せずに独自のスキンを作成したい場合は、 Player Management APIとして指定することができます。 Player 構成ガイド 必要な情報を提供します。
Player
の外観を変更できます player、しかしあなたは最初にそれに対処する方法を持っている必要があります。 これを確認するには、高度な(ページはめ込み)コードが挿入されたHTMLページを参照します。 の中に 要素 開発ツールのセクションを見つけます <video-js>
タグを使用すると、値を持つクラスが表示されます video-js
他の多くの間で割り当てられます。

これがわかったら、スタイルを使用して player 自体。 たとえば、 player このスタイルを使用できます:
<style>
.video-js {
border-style: double;
border-width: thick;
border-color: red;
}
</style>

IFRAME player
の標準(iframe)実装を使用している場合 player 状況は異なります。 あなたはまだ表示されます player video-js
クラスですが、もちろん、それはiframe内と、 video-js
タグ。

作成したスタイルは、 player iframe内にありますが、CSSファイルを作成して、 player 使用して Studio。 これを行うには、 Players の作成と管理 モジュールをクリックし、 player CSSを関連付けたい場合は、 プラグイン>スタイルシート セクションにCSSファイルのパスを追加します。
iframe自体をカスタマイズする場合は、要素セレクターを使用してこれを行うことができます。 次に <style>
必要に応じて変更するタグ。 以下の例では、境界線が player.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
.video-js {
border-style: double;
border-width: thick;
border-color: red;
}
</style>
</head>
<body>
<iframe src="https://players.brightcove.net/1507807800001/default_default/index.html?videoId=6065136830001"
allowfullscreen=""
allow="encrypted-media"
width="640" height="360"></iframe>
</body>
</html>
再生ボタン
再生ボタンの外観を変更する場合は、最初にその対処方法を知る必要があります。 Chromeでは、ボタンを右クリックします。 表示される選択肢から選択します 検査する。 選択すると 検査する、Chrome 開発ツール 開くでしょう。

の中に 要素 開発ツールのセクションには、ボタン要素に対応するHTMLコードが表示されます。

上記の強調表示されたコードから、ボタンに割り当てられたクラスが vjs-big-play-button
。 再生ボタンの色(虎に合わせるため)と不透明度は、次のスタイルで変更されます。
.vjs-big-play-button {
background-color: #B37D5B;
opacity: .6;
}
このアプローチは機能すると思いますが、機能しません。 CSSを使用する場合は、プロパティの特異性に注意する必要があります。 これは、ブラウザが、関連性に基づいて要素に適用されるプロパティ値を決定する方法を指します。
ボタンの変更を適用するXNUMXつの方法は、セレクターに別のクラスを追加することです。 たとえば、 .video-js
セレクターの特定性を高めるためのクラス。 詳細については、 CSSの特異性 セクション
次に、 player次のCSSの大きな再生ボタン:
.video-js .vjs-big-play-button {
background-color: #B37D5B;
opacity: .6;
}
ボタンを濃いグレーからオレンジ色に変更した結果は次のとおりです。

再生ボタンを隠す
次のスタイルを使用して再生ボタンを完全に隠すことができます:
display: none;
実験
次のCodePenでは、再生ボタンを試すことができます。 再生ボタンの三角形は実際にはフォントであり、そのサイズは font-size
スタイル。
ペンを見る 5.xビッグプレイボタンのカスタマイズ Matt Boles(著)@mboles)上 コードペン.
ホバーテキストを変更する
大きな再生ボタンにカーソルを合わせると表示されるテキストを変更したい場合は、 ビデオを再生する デフォルトでは、あなたのビデオにもっと特定の何かをすることができます。 目的の表現を引数として使用して、次のJavaScriptを追加します controlText
方法。
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.getChild('bigPlayButton').controlText('Play Audio');
});
視認性を制御する
コントロールバーとそこに含まれるコントロールを表示するかどうかを制御できます。 最初からコントロールバーを非表示にしたい場合 player このスタイルを使用できる作成:
.video-js .vjs-control-bar {
display: none;
}
これを何らかのイベントに基づいて動的に行いたい場合は、 controlBar.hide()/show()
メソッド。 以下のコードスニペットは、メソッドの使用方法を示しています(これは、 id
値は myPlayer
ビデオ):
<video-js id="myPlayerID"
data-video-id="5781068653001"
data-account="1507807800001"
data-player="default"
data-embed="default"
data-application-id
class="video-js"
controls></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
<p><button onclick="hideBtn()">hide controls</button></p>
<p><button onclick="showBtn()">show controls</button></p>
<script>
var myPlayer;
videojs.getPlayer('myPlayerID').ready(function() {
myPlayer = this;
});
function hideBtn() {
myPlayer.controlBar.hide();
}
function showBtn() {
myPlayer.controlBar.show();
}
</script>
コントロールは非表示になりません
コントロールを非表示にしないようにすることもできます。 これを行うには、 transform.none
スタイル。 セレクターは非常に長く、変換の特異性のためにXNUMXつのクラスが使用されます。
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-active .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-paused.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-active .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.not-hover.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible),
.video-js.vjs-has-started.vjs-paused.vjs-ad-playing.vjs-user-inactive .vjs-control-bar,
.video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar:not(.vjs-focus-within):not(.vjs-control-bar-visible){
transform: none;
-webkit-transform: none;
-ms-transform: none;
}
プログレスバー
次に、進行状況インジケーターの色を変更する方法を確認します。 次に示すように、インジケーターのデフォルトの色はフクシアです。

ここでの課題は、要素のクラス名を見つけることです。 このドキュメントで前述したのと同じ手法を使用して、要素を右クリックし、 検査する、ドリルダウンすると、 vjs-play-progress
クラス。

background-color
要素の色を変更し、スタイルを設定する必要があります。 必要なスタイルは次のとおりです。
.video-js .vjs-play-progress {
background-color: green;
}
ていることに注意してください .video-js
クラスがセレクターに追加されました。 これは、セレクターのCSS固有性を高めるために行われます。
結果は次のようになり、緑色の進行状況バーが表示されます。

ボリュームコントロール
CSSを使用するか、 options
中のオブジェクト player 創作。
CSSによる更新
次に、ボリュームコントロールの色を変更する方法を確認します。 デフォルトの外観は次のとおりです。白いボリュームボタンにフクシアボリュームレベルバーがあります。

音量ボタンの色を変更し、クリックしたときにミュートボタンを変更するには、次のセレクタを使用します。
.vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal {
color: yellow;
}
音量バーの色を変更するには、 background-color
要素のスタイルを設定する必要があります。 必要なスタイルは次のとおりです。
.video-js .vjs-volume-level{
background-color: yellow;
}
ていることに注意してください .video-js
クラスがセレクターに追加されました。 これは、セレクターのCSS固有性を高めるために行われます。
ボタンとボリュームバーのスタイル設定の結果は次のとおりです。

オプションオブジェクトを使用して更新
ボリュームコントロールのレイアウトを変更するには、 options
にオブジェクト bc()メソッド 次のように:
- 遅延 player から次の属性を削除して作成します
video
タグ:data-account
data-player
data-video-id
- 定義
options
オブジェクトのようにvolumePanel
垂直であり、コントロールバーと一致していません。var options = { controlBar: { volumePanel: { inline: false, vertical: true } } };
- 加えます player 最初に削除された属性。
- 作ります player を呼び出すことによって bc()メソッド
options
オブジェクト。bc("myPlayerID", options);
- 詳細については、 垂直方向のボリュームコントロール player サンプル。
フォント
タイトルと説明は、 player が最初に読み込まれ、ユーザーが player。 タイトルと説明のフォントのスタイルは、一緒にまたは個別に変更できます。 のHTML ドック 次のスクリーンショットに示すように表示されます。 なお、 <div>
クラスを持つ要素 vjs-dock-text
2つの他の <div>
要素を含む要素 タイトル 更に 説明.

タイトルと説明の両方に影響を与えるには、 vjs-dock-text
クラス。 なお、 .vjs-dock-title
更に .vjs-dock-description
もちろん、より高いレベルで設定されたスタイルによって完全に上書きされることはありません。 いくつかのスタイルは継承され、次のスタイルとその結果がテキストに表示されます。
.video-js .vjs-dock-text {
color: yellow;
font-size: .7em;
}

個々のタイトルと説明を直接スタイルすることができます。 以下は、 .vjs-dock-title
更に .vjs-dock-description
クラスセレクタを使用して、結果のテキストにスタイルを表示します。
.video-js .vjs-dock-title {
color: red;
font-size: 1.5em;
}
.video-js .vjs-dock-description {
color: yellow;
font-size: 1.0em;
}

コントロールバーのアイコンの操作
コントロールバーのアイコンの順序は、HTMLの順序で決まります <div>
親コントロールバーのs <div>
。 ここにコントロールバーが表示されます <div>
すべての子供たちと一緒に。

一般に、これはコントロールバーにアイコンを配置するときに取るアプローチです:
- コントロールバーに挿入する要素を動的に作成します。
- コントロールバー要素への参照を取得します。
- 新しい要素をコントロールバーの前に挿入する要素への参照を取得します。
- JavaScriptを使用する
insertBefore()
メソッドを呼び出してアイコンを配置します。
具体的には、次のコードを使用して、ダウンロードアイコンをボリュームアイコンの前に挿入します。
- 280-285:ダウンロードボタンのスタイル。
- 291-295:変数を割り当て、以下のHTML要素を作成します。
-
<div>
ダウンロードアイコンのアイコンが表示されます。 - アイコンをクリック可能にするアンカータグ。
- アイコン画像そのもの。
-
- 297-2980:新しい要素にidクラスとCSSクラスを割り当てます。
- 線300:画像にソースを割り当てます。
- ライン301:
href
リンクへ。 - Line 302:画像をリンクに追加します。
- 線303:動的に作成されたリンクにリンクを追加する
<div>
. - Line 306:で使用するコントロールバーへの参照を取得する
insertBefore()
. - Line 308:新しいアイコンが挿入される要素への参照を取得します。
insertBefore()
. - Line 310:動的に作成された要素を挿入します。
<!-- styles for page -->
/* Style the download icon */
#downloadButton {
width: 34px;
height: 33px;
margin-top: 6px;
}
</style>
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
// Create variables and new div, anchor and image for download icon
var myPlayer = this,
controlBar,
newElement = document.createElement('div'),
newLink = document.createElement('a'),
newImage = document.createElement('img');
// Assign id and classes to div for icon
newElement.id = 'downloadButton';
newElement.className = 'downloadStyle vjs-control';
// Assign properties to elements and assign to parents
newImage.setAttribute('src','http://solutions.brightcove.com/bcls/brightcove-player/download-video/file-download.png');
newLink.setAttribute('href','http://www.brightcove.com');
newLink.appendChild(newImage);
newElement.appendChild(newLink);
// Get controlbar and insert before elements
// Remember that getElementsByClassName() returns an array
controlBar = document.getElementsByClassName('vjs-control-bar')[0];
// Change the class name here to move the icon in the controlBar
insertBeforeNode = document.getElementsByClassName('vjs-volume-menu-button')[0];
// Insert the icon div in proper location
controlBar.insertBefore(newElement,insertBeforeNode);
});
ここにコードの結果が表示され、新しく挿入されたアイコンが黄色で強調表示されます。

別の場所にアイコンを表示したい場合は、その前に挿入する要素を取得するコードを変更するだけで済みます。 たとえば、フルスクリーンボタンの前に新しいアイコンを移動するには、次のようにします。
insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0];
結果は次のようになります。

右端のアイコン
アイコンがコントロールバーの右端に表示されるようにするには、 insertBefore()
appendChild()
メソッドを呼び出します。
controlBar.appendChild(newElement);
アイコンを追加する例(ここではファイルをダウンロードする場合)は、 Brightcove Player サンプル:ビデオプラグインをダウンロード の資料をご参照ください。
スペーサーを使用する
上記のテクニックは、コントロールバーにアイコンを配置する作業ですが、コントロールバーを操作する他のコードと互換性がない可能性があります。 また、一般的な再利用のためにコードをプラグインに抽象化したくない可能性が高いでしょう。
前の段落の弱点は、特別な スペーサ 要素をコントロールバーに挿入すると、特にアイコンを追加できます。 スペーサーの欠点は、このセクションの前半に示したテクニックを使用するのに対し、アイコンの配置場所を完全に制御できないことです。
スペーサー要素は、次のスクリーンショット(緑色の楕円でハイライト表示)に示すように、コントロールバーの左側の時間情報と右側のフルスクリーンアイコンの間に配置されています。 メモ 要素 要素が定義されているDevツールのセクションHTML <div>
.

スペーサー要素にアイコンを配置するには、次のコードを使用します。このコードは、このセクションで前述したコードと非常によく似ています。 コードの結果は、コードスニペットに続くスクリーンショットに示されています。
// Get the spacer element
spacer = document.getElementsByClassName('vjs-spacer')[0];
// Place the new element in the spacer
spacer.appendChild(newElement);

スペーサーの右側にアイコンを配置する場合は、別のコード行を使用する必要があります。 スペーサーのレイアウトは、HTML Flexboxによって制御されます。 Flexboxスタイルを追加すると、追加したアイコンを右に押すことができます。 コードの結果は、コードスニペットに続くスクリーンショットに示されています。
// Set the content of the spacer to be right justified
spacer.setAttribute("style", "justify-content: flex-end;");

全画面ボタンを削除
iOSで動画の全画面表示を許可すると問題が発生する可能性があります iOSと Brightcove Player 資料。 コントロールバーから全画面ボタンを削除する場合は、次のコードを使用します。
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this,
fullScreenElement = document.getElementsByClassName("vjs-fullscreen-control")[0];
if (videojs.browser.IS_IOS ) {
fullScreenElement.parentNode.removeChild(fullScreenElement);
}
});
</script>
注意してください if
iOSデバイスでのみボタンが削除されるようにします。
コントロールバーアイコン "グロー"
コントロールバーのアイコンのテキストシャドー(「グロー」とも呼ばれます)を変更することができます。 たとえば、色を変更したり、グローを増やしたりして、アイコンをもっと重視することができます。 次のスクリーンショットは、テキストシャドーを赤で示しています。

表示される影響は、CSSを変更することによって行われます text-shadow
。 セレクタは、変更がフォーカスまたはホバーの状態を持つアイコンでのみ発生すると判断します。
.video-js .vjs-control:hover:before, .video-js .vjs-control:focus:before {
text-shadow: 0 0 1em #f00,0 0 1em #f00,0 0 1em #f00;
}
かなり複雑な情報については、 text-shadow
スタイル、MDNを参照してください テキストの影 の資料をご参照ください。
ホバー勾配
時 player が最初にロードされ、マウスを上に置くと player、ビデオタイトルが表示され、上部に黒から透明へのグラデーションが表示されます。 player。 このセクションでは、グラデーションを変更する方法を示します。
実際の勾配はCSSによって制御されます linear-gradient
内の関数 vjs-dock-text
HTML <div>.
勾配の大きさは、 vjs-dock-text
HTML <div>
。 これがその要素とその子です player:
<div class="vjs-dock-text">
<h1 class="vjs-dock-title">Tiger</h1>
<h2 class="vjs-dock-description"></h2>
</div>
グラデーションのデフォルト値は rgba()
(赤 - 緑 - 青 - アルファ)機能をサポートしています。
linear-gradient(180deg,rgba(0,0,0,.8) 25%,transparent 100%);
これらの値はグラデーションを黒から水平方向にフェードインさせ、アルファ .8透明にする。 の価値 67% カットオフ値です。これは、 rgba
関数は、透明へのフェーディングが始まる前のスペースの最初の25%に使用されます。
プロダクションでこのグラデーションを使用しないように、説明の目的で、次のスタイルはスクリーンショットにグラデーションを作成します。
.video-js .vjs-dock-text {
background: linear-gradient(45deg, rgba(0,0,255,.8) 35%, transparent);
height: 80%;
}

この例では、.8アルファの青のグラデーションが45度の下り坂の角度で適用されます。 線形グラデーションで設定された色/アルファは、グラデーションの最初の35%に使用されてから消え始めます。 また、要素の高さの80%が使用されます。
次のCodePenでは、値を試すことができます。 ビデオを開始してマウスを出し入れし、デフォルトで使用される微妙なグラデーションを確認します。
ペンを見る ホバーグラデーションルナスキン by Brightcove ラーニングサービス(@bcls)上 コードペン.
キャプションリストアイテム
キャプションメニューのリストアイテムをスタイル/制御する場合、セレクターは次のように表示されます。

セレクタを使用してすべてのアイテムをスタイルできます:
.vjs-subs-caps-button .vjs-menu .vjs-menu-content .vjs-menu-item.
CSSの特異性
CSSの特定性とは、ブラウザーが、関連性に基づいて要素に適用されるプロパティー値を決定する方法を指します。 このコンセプトの詳細については、 特異性 記事。
Chromeでは、大きな再生ボタンを確認します。 注意してください background
プロパティは複数のクラスを使用して設定されます。 これは私たちが1つしか使用できないことを意味します .vjs-big-play-button
クラスを使用してこのプロパティをオーバーライドします。

大きな再生ボタンをカスタマイズするには、次の3つの方法があります。
- に割り当てられたIDを参照する player.
- 複数のクラスを使用して、プロパティの関連性を高めます。
- JavaScriptを使用して、id属性を player そしてそれをCSSで参照します。
IDの参照
ある id
CSSの特異性に関する関連性が高く、 id
CSSセレクタに background-color
プロパティ。
まだ実行していない場合は、 id
属性を video
要素は次のようになります。
<video-js id="video_1"
data-account="1752604059001"
data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
data-embed="default"
class="video-js" controls></video-js>
CSSでは、id値を .vjs-big-play-button
クラスセレクタ。 背景色と不透明度を次のように上書きします。
<style>
#video_1 .vjs-big-play-button {
background-color: #B37D5B;
opacity: .6;
}
.video-js {
width: 640px;
height: 360px;
}
</style>
ビッグプレイボタンがオレンジ色になっているはずです。

複数のクラスの使用
から background
大きな再生ボタンのプロパティが2つのクラスを使用して設定されている場合、このプロパティをオーバーライドするには、CSSセレクタに少なくとも2つのクラスが必要です。
加えます .video-js
にクラス .vjs-big-play-button
クラスセレクタ。 あなたは .video-js
クラスがビデオコンテナに設定されています。
これらの値を使用して、クラス名がすべての要素を選択する vjs-big-play-button
クラス名が要素の死亡者である .video-js
.
<style>
.video-js .vjs-big-play-button {
background-color: #B37D5B;
opacity: .6;
}
.video-js {
width: 640px;
height: 360px;
}
</style>
ビッグプレイボタンがオレンジ色になっているはずです。 複数のクラスを操作するのは難しいかもしれませんし、複数の要素に影響するかもしれませんが、idは1つの要素に固有です。
JavaScriptを使用する
JavaScriptを使用して、大きな再生ボタンにIDを動的に追加することもできます。 次に、そのIDをCSSから参照できます。
大きな再生ボタン要素にIDを追加するコードを追加します。
- Line 173:クラスを持つ最初の要素への参照を取得します。
vjs-big-play-button
. - ライン174:
id
大きな再生ボタンの属性
<script type="text/JavaScript">
var playButton = document.getElementsByClassName("vjs-big-play-button")[0];
playButton.setAttribute("id", "myPlayButton");
</script>
CSSでセレクタを変更して myPlayButton
IDの名前。
<style>
#myPlayButton {
background-color: #B37D5B;
opacity: .6;
}
.video-js {
width: 640px;
height: 360px;
}
</style>
ビッグプレイボタンがオレンジ色になっているはずです。
コンポーネントセレクタ
これらのスクリーンショットと次の表は、コンポーネントと、そのコンポーネントを操作するために必要なCSSセレクタを示しています。 コンポーネント自体の詳細については、 コンポーネントの概要 doc。
On player ロードとホバー

再生中

コンポーネントセレクタの概要
成分 | セレクタ |
---|---|
BigPlayButton | .video-js.vjs-mouse .vjs-big-play-button |
コントロールバー | .video-js .vjs-control-bar (ControlBarのアイコンは継承されますが、ProgressControlのアイコンは継承されません) |
PlayToggle | .video-js .vjs-play-control |
ミュートトグル | .vjs-volume-panel.vjs-control.vjs-volume-panel-horizontal |
VolumeBar | .vjs-volume-bar.vjs-slider-bar.vjs-slider.vjs-slider-horizontal |
VolumeLevel | .video-js .vjs-volume-level |
CurrentTimeDisplay | .video-js .vjs-current-time |
TimeDivider | .video-js .vjs-time-divider |
DurationDisplay | .video-js .vjs-duration |
SeekBar | .video-js .vjs-progress-control.vjs-control |
LoadProgressBar | .video-js .vjs-load-progress |
PlayProgressBar | .video-js .vjs-play-progress.vjs-slider-bar |
オーディオトラック | .video-js .vjs-control-bar .vjs-audio-button |
チャプターボタン | .video-js .vjs-chapters-button.vjs-menu-button |
CaptionsButton | .video-js .vjs-captions-button.vjs-menu-button |
フルスクリーントグル | .video-js .vjs-fullscreen-control.vjs-control |
DockText | .vjs-dock-text (DockTitleとDockDescriptionの両方によって継承されます) |
DockTitle | .vjs-dock-title |
DockDescription | .vjs-dock-description |
探しているセレクターがテーブルにない場合は、 ナレッジチーム それをテーブルの中に入れます。
{PLAYER_クラス}
{PLAYER_CLASS}
セレクタであり、実際のクラス固有のセレクタに置き換えられます playerたとえば、次の
.bc-player-oH9IdGudo_default
{PLAYER_CLASS}
それぞれにCSSを作成しなくても、組み込みスタイルを上書きできるようにCSSを具体的に指定するのに役立ちます player 個別に、または次のようなものを使用します:
.video-js.video-js
たとえば、ローディングスピナーをオーバーライドするとします。
.video-js.video-js .vjs-loading-spinner {...}
これはデフォルトをオーバーライドするのに十分具体的ですが、XNUMX番目の player ページ上。 以下を使用しても他には影響しません player ページ内:
.video-js{PLAYER_CLASS} .vjs-loading-spinner {...}
なお、 {PLAYER_CLASS}
セレクターは、に追加されたCSSファイルでのみ使用できます。 player 構成スタイルシート配列(たとえば、 Studio または Player Management API)に直接組み込まれ、 player。 このセレクターは、個別に含まれる高度な実装コードCSSでは機能しません <style></style>
or <link></link>
タグ。