カスタマイズ 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;
}

ちょっとしたハックと考えられていますが、コントロールバーのクラスを8回繰り返して、上記のセレクターに合うようにその特殊性を構築できます。

.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar.vjs-control-bar {
  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() メソッドを呼び出してアイコンを配置します。

の構文 insertBefore() 次のとおりです。

parent.insertBefore(newElement,insertBeforeElement)

つまり、下の詳細なコードでは、コントロールバー（親）への参照を取得するためのJavaScript、新しい <div> コントロールバーに挿入するアイコン、最後に新しいアイコンが挿入される要素への参照が含まれています。

具体的には、次のコードを使用して、ダウンロードアイコンをボリュームアイコンの前に挿入します。

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;");

/ playback / ios-and-brightcove-player.html / playback / ios-and-brightcove-player.htmlを

全画面ボタンを削除

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透明にする。の価値 ６７% カットオフ値です。これは、 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> タグ。

ページ内容

カスタマイズ Player 外観

独自のスキンを作成する

Player

IFRAME player

再生ボタン

再生ボタンを隠す

実験

ホバーテキストを変更する

視認性を制御する

コントロールは非表示になりません

プログレスバー

ボリュームコントロール

CSSによる更新

オプションオブジェクトを使用して更新

フォント

コントロールバーのアイコンの操作

右端のアイコン

スペーサーを使用する

全画面ボタンを削除

コントロールバーアイコン "グロー"

ホバー勾配

キャプションリストアイテム

CSSの特異性

IDの参照

複数のクラスの使用

JavaScriptを使用する

コンポーネントセレクタ

On player ロードとホバー

再生中

コンポーネントセレクタの概要

{PLAYER_クラス}