プレーヤー外観のカスタマイズ

独自スキンの作成

デフォルトのスキンを使用せずに独自のスキンを作成したい場合は、Player Management API を使用して実現できます。必要な情報はプレーヤー設定ガイドに記載されています。

プレーヤー

プレーヤーの外観を変更するには、まずプレーヤーを特定できる必要があります。これを確認するには、Videoタグ（インページ埋め込み）コードを挿入した HTML ページを開きます。開発者ツールの Elements セクションで <video-js> タグを探すと、多くのクラスの中に video-js クラスが割り当てられていることがわかります。

この情報を元に、スタイルを使ってプレーヤー自体を変更できます。例えば、プレーヤーの周囲に枠線を追加するには、以下のスタイルを使用します:

    <style>
      .video-js {
        border-style: double;
        border-width: thick;
        border-color: red;
      }
    </style>

iframe プレーヤー

iframe 実装のプレーヤーを使用している場合、状況は異なります。プレーヤーは引き続き video-js クラスを持ちますが、当然 iframe 内部の video-js タグに存在します。

作成したスタイルは iframe 内のプレーヤーにも適用されますが、CSS ファイルを作成し、Studio を使ってプレーヤーに関連付ける必要があります。これを行うには、Players モジュールに移動し、CSS を関連付けたいプレーヤーを選択し、プラグイン > スタイルシート セクションで CSS ファイルのパスを追加します。

iframe 自体をカスタマイズしたい場合は、要素セレクタを使用できます。その後、<style> タグを使って希望する修正を適用します。以下の例では、プレーヤーの周囲に枠線を追加しています。

    <!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 では、ボタンを右クリックし、表示されるメニューから Inspect を選択します。選択すると、Chrome の開発者ツールが開きます。

Elements セクションには、ボタン要素に対応する HTML コードが表示されます。

上記のハイライト部分から、このボタンに割り当てられているクラスは vjs-big-play-button であることがわかります。以下のスタイルにより、再生ボタンの色（虎の色に合わせて）と不透明度を変更できます:

    .vjs-big-play-button {
      background-color: #B37D5B;
      opacity: .6;
    }

この方法で動作するように思えますが、実際には動作しません。CSS を扱う際には、プロパティの「特異性（specificity）」を理解する必要があります。これは、ブラウザがどのプロパティ値を適用するかを判断する仕組みです。

変更を反映させる 1 つの方法は、セレクタにクラスを追加することです。例えば、.video-js クラスを使用することで、セレクタの優先度を上げられます。詳細は CSS 特異性セクションをご覧ください。

次に、以下のようにプレーヤーの大きな再生ボタンを参照します:

    .video-js .vjs-big-play-button {
      background-color: #B37D5B;
      opacity: .6;
    }

以下は、ボタンをダークグレーからオレンジに変更した例です:

再生ボタンを非表示にする

以下のスタイルを使用すると、再生ボタンを完全に非表示にできます:

    display: none;

実験

以下の CodePen では、再生ボタンのカスタマイズを試すことができます。なお、再生ボタン内の三角形は実際にはフォントであり、そのサイズは font-size スタイルで制御されています。

See the Pen Big Play Button Customization by Brightcove Learning Services (@rcrooks1969) on CodePen.

ホバーテキストの変更

大きな再生ボタンにカーソルを合わせた際に表示されるテキスト（デフォルトは Play Video）を、動画に合わせた文言に変更することができます。以下の JavaScript を追加し、controlText メソッドに希望のテキストを指定してください。

    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.getChild('bigPlayButton').controlText('Play Audio');
    });

コントロールの表示状態

コントロールバーおよびその中に含まれるコントロールを表示するかどうかを制御できます。プレーヤー作成時からコントロールバーを非表示にしたい場合は、次のスタイルを使用します。

      .video-js .vjs-control-bar {
        display: none;
      }

イベントに基づいて動的にこの動作を行いたい場合は、controlBar.hide()/show() メソッドを使用できます。以下のコードスニペットはメソッドの使用例です（video 要素に、値が myPlayer の id が設定されていることを前提としています）。

      <video-js id="myPlayerID"
        data-account="1507807800001"
        data-player="default"
        data-embed="default"
        controls=""
        data-video-id="5781068653001"
        data-playlist-id=""
        data-application-id=""
        width="960" height="540"></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 スタイルを使用します。セレクタには、transform の特異性を高めるために 6 つのクラスが使用されているため、非常に長くなっています。

      .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;
      }

プログレスバー

ここでは、再生進行インジケーターの色を変更する方法を説明します。インジケーターのデフォルトの色は、ここに示すようにフクシアです。

ここでの課題は、対象となる要素のクラス名を見つけることです。本ドキュメントの前半で説明したのと同じ手順、つまり要素を右クリックして Inspect を選択し、さらに掘り下げていくと、vjs-play-progress クラスを確認できます。

background-color プロパティは要素の色を変更するため、スタイル指定が必要です。必要なスタイルは次のとおりです。

      .video-js .vjs-play-progress {
        background-color: green;
      }

セレクタに .video-js クラスが追加されている点に注目してください。これは、セレクタの CSS の特異性を高めるためです。

その結果、次のようにプログレスバーが緑色で表示されます。

音量コントロール

音量コントロールは、CSS を使用する方法と、プレーヤー作成時に options オブジェクトを渡す方法のいずれかでカスタマイズできます。

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 オブジェクトを使用して変更する

音量コントロールのレイアウトを変更するには、次のように options オブジェクトを bc() メソッドに渡します。

video タグから次の属性を削除し、プレーヤーの生成を遅延させます。
- data-account
- data-player
- data-video-id

options オブジェクトを定義し、volumePanel がコントロールバーとインラインではなく、縦向きになるようにします。

      var options = {
        controlBar: {
          volumePanel: {
            inline: false,
            vertical: true
          }
        }
      };

最初に削除したプレーヤー属性を再度追加します。
options オブジェクトを指定して bc() メソッドを呼び出し、プレーヤーを作成します。
```
      bc("myPlayerID", options);
```
詳細については、縦型ボリュームコントロールプレーヤーサンプルを参照してください。

フォント

タイトルと説明は、プレーヤーが最初に読み込まれたときと、ユーザーがプレーヤーにカーソルを重ねたときに表示されます。タイトルと説明のフォントスタイルは、一括または個別に変更できます。TitleBar の HTML は、次のスクリーンショットのようになります。vjs-title-bar クラスを持つ <div> 要素があり、その中に title と description を含む 2 つの <div> 要素がある点に注目してください。

vjs-title-bar クラスにスタイルを設定することで、タイトルと説明の両方に影響を与えることができます。なお、.vjs-title-bar-title および .vjs-title-bar-description に設定されたスタイルは、当然ながら上位レベルで設定されたスタイルで完全に上書きされるわけではありません。以下のスタイルで示すように、一部のスタイルは継承されます。

      .video-js .vjs-title-bar {
        color: yellow;
        font-size: .7em;
      }

タイトルと説明を個別に直接スタイル設定することもできます。以下は、.vjs-title-bar-title および .vjs-title-bar-description のクラスセレクタに設定されたスタイルと、そのスタイルが適用されたテキストの例です。

      .video-js .vjs-title-bar-title {
        color: red;
        font-size: 1.5em;
      }
      .video-js .vjs-title-bar-description {
        color: yellow;
        font-size: 1.0em;
      }

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

コントロールバー内のアイコンの並び順は、親となるコントロールバーの <div> 内にある HTML の <div> の順番によって決まります。ここでは、コントロールバーの <div> と、そのすべての子要素を確認できます。

一般的に、コントロールバーにアイコンを配置する際のアプローチは次のとおりです。

コントロールバーに挿入したい要素を動的に生成する。
コントロールバー要素への参照を取得する。
新しい要素を挿入したい既存要素への参照を取得する。
JavaScript の insertBefore() メソッドを使用してアイコンを配置する。

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

      parent.insertBefore(newElement,insertBeforeElement)

つまり、以下の詳細コードでは、コントロールバー（parent）への参照、新しく挿入するアイコンを含む <div>、そしてそのアイコンを挿入する位置を決める既存要素への参照を取得する JavaScript が表示されます。

以下のコードは、音量アイコンの前に動画ダウンロードアイコンを挿入する例です。

280〜285 行: ダウンロードボタンのスタイル。
291〜295 行: 次の要素の変数定義と HTML 要素作成。
- ダウンロードアイコンを格納する <div>
- アイコンをクリック可能にするアンカー要素
- アイコン画像
297〜298 行: 新しい要素に id と CSS クラスを割り当て。
300 行: 画像の src を設定。
301 行: リンクに href を設定。
302 行: 画像をリンクに追加。
303 行: リンクを動的に作成した <div> に追加。
306 行: insertBefore() 用にコントロールバーへの参照を取得。
308 行: アイコンを挿入したい位置の要素への参照を取得。
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 サンプル：動画ダウンロードプラグインに掲載されています。

スペーサーの利用

上記の手法はコントロールバーにアイコンを配置する際に有効ですが、コントロールバーを操作する他のコードと互換性がない場合があります。また、一般的に再利用するためにプラグイン化したくないケースもあるでしょう。

これらの弱点は、コントロールバーに特別に用意されている スペーサー 要素を使用することで解消できます。ただし、スペーサーを使用する場合、アイコンの配置場所が完全には制御できない点が欠点です。一方、以前の手法では配置を完全に制御できます。

スペーサー要素は、左側の時間表示と右側のフルスクリーンアイコンの間にあります。以下のスクリーンショット（緑色の楕円）に示されています。開発者ツールの Elements セクションでは、この要素が 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 の text-shadow ドキュメントを参照してください。

ホバー時のグラデーション

プレーヤーが最初に読み込まれたときと、プレーヤーの上にマウスカーソルを置いたときに、動画タイトルが表示されるとともに、プレーヤー上部に黒から透過へ変化するグラデーションが表示されます。このセクションでは、そのグラデーションを変更する方法を説明します。

実際のグラデーションは、HTML の vjs-title-bar <div> 内で使用されている CSS の linear-gradient 関数によって制御されています。グラデーションの高さは、HTML の vjs-title-bar <div> の高さで制御できます。以下は、プレーヤープロパティ内におけるこの要素構造の一例です。

      <div class="vjs-title-bar">
        <div class="vjs-title-bar-title">Tiger</div>
        <div class="vjs-title-bar-description"></div>
      </div>

デフォルトのグラデーション値は、以下に示すように rgba()（red-green-blue-alpha）関数を使用しています。

      linear-gradient(180deg,rgba(0,0,0,.8) 25%,transparent 100%);

この値により、グラデーションは黒（アルファ値 .8）から透明へと縦方向にフェードします。25% の値はカットオフ値であり、スペースの最初の 25% までは rgba 関数で指定した色が使用され、その後に透明へのフェードが始まることを意味します。

実運用ではあまり使用しないであろうグラデーションですが、説明目的として、以下のスタイルによりスクリーンショットのようなグラデーションを作成しています。

      .video-js .vjs-title-bar {
        background: linear-gradient(45deg, rgba(0,0,255,.8) 35%, transparent);
        height: 80%;
      }

この例では、アルファ値 .8 の青いグラデーションが 45 度の右下がりの角度で適用されています。linear-gradient に設定した色／アルファは、グラデーションの最初の 35% に対して使用され、その後フェードが始まります。また、要素の高さの 80% がグラデーションに使用されています。

以下の CodePen では、値を変更して試すことができます。動画を再生して、マウスをプレーヤーの内外に移動すると、デフォルトで使用されている控えめなグラデーションを確認できます。

See the Pen Hover Gradient Luna Skin by Brightcove Learning Services (@bcls) on CodePen.

キャプションリスト項目

キャプションメニュー内のリスト項目をスタイル設定／制御したい場合は、次のセレクタを使用します。

すべての項目をスタイル設定するには、次のセレクタを使用します。

      .vjs-subs-caps-button .vjs-menu .vjs-menu-content .vjs-menu-item.

CSS の特異性（specificity）

CSS の特異性とは、ブラウザがどのプロパティ値を要素に適用するかを、その関連性に基づいて判断する仕組みを指します。この概念の詳細については、Specificity の記事をご確認ください。

Chrome で大きな再生ボタンを検証すると、background プロパティが複数のクラスによって設定されていることに気づきます。これは、単に .vjs-big-play-button クラスだけではこのプロパティを上書きできないことを意味します。

以下は、大きな再生ボタンをカスタマイズするための 3 つのアプローチです。

プレーヤーに割り当てられた id を参照する。
複数のクラスを使用してプロパティの関連性（特異性）を高める。
JavaScript を使用してプレーヤーに id 属性を設定し、その id を CSS で参照する。

id を参照する方法

id 属性は CSS の特異性が高いため、CSS セレクタに id を追加すると background-color プロパティを上書きできます。

まだ実施していない場合は、次のように video 要素に id 属性を追加してください。

      <video-js id="video_1"
        data-account="1752604059001"
        data-player="default"
        data-embed="default"
        controls=""></video-js>

CSS では、.vjs-big-play-button セレクタに id 値を追加します。以下のように背景色と不透明度を上書きします。

      <style>
        #video_1 .vjs-big-play-button {
            background-color: #B37D5B;
            opacity: .6;
          }
          .video-js {
            width: 640px;
            height: 360px;
          }
      </style>

これにより、大きな再生ボタンがオレンジ色に変わります。

複数のクラスを使用する方法

大きな再生ボタンの background プロパティは 2 つのクラスによって設定されているため、このプロパティを上書きするには CSS セレクタにも少なくとも 2 つのクラスが必要です。

.vjs-big-play-button セレクタに .video-js クラスを追加します。.video-js クラスは video コンテナに設定されている点を思い出してください。

この指定により、「.video-js クラスを持つ要素の子孫で、vjs-big-play-button クラスを持つすべての要素」を選択することになります。

      <style>
        .video-js .vjs-big-play-button {
          background-color: #B37D5B;
          opacity: .6;
        }
        .video-js {
          width: 640px;
          height: 360px;
        }
      </style>

これでも再生ボタンがオレンジに変わります。ただし、複数クラスを扱う場合は他の要素にも影響する可能性があるため、id ほど限定的ではありません。

JavaScript を使用する方法

JavaScript を使用して、再生ボタンに動的に id を追加し、CSS からその id を参照することもできます。

以下のコードを追加して再生ボタンに id を設定します。

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 セレクタを示しています。コンポーネント自体の詳細については、コンポーネント概要< ドキュメントを参照してください。

プレーヤー読み込み時とホバー時

再生中

コンポーネントセレクタの一覧

コンポーネント	セレクタ
BigPlayButton	`.video-js.vjs-mouse .vjs-big-play-button`
ControlBar	`.video-js .vjs-control-bar`（ControlBar 内のアイコンに継承されるが、ProgressControl には継承されない）
PlayToggle	`.video-js .vjs-play-control`
MuteToggle	`.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`
AudioTrack	`.video-js .vjs-control-bar .vjs-audio-button`
ChaptersButton	`.video-js .vjs-chapters-button.vjs-menu-button`
CaptionsButton	`.video-js .vjs-captions-button.vjs-menu-button`
QualitySelector	`.vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution`
FullScreenToggle	`.video-js .vjs-fullscreen-control.vjs-control`
TitleBarText	`.vjs-title-bar`（TitleBarTitle および TitleBarDescription に継承される）
TitleBarTitle	`.vjs-title-bar-title`
TitleBarDescription	`.vjs-title-bar-description`

もしこの表に掲載されていないセレクタをお探しの場合は、Knowledge Team までメールでお知らせください。表に追加いたします。

{PLAYER_CLASS}

{PLAYER_CLASS} はセレクタであり、実際にはプレーヤー固有のクラスセレクタに置き換えられます。例えば次のようになります。

      .bc-player-oH9IdGudo_default

{PLAYER_CLASS} を使うことで、各プレーヤーごとに個別の CSS を記述したり、次のような指定を使ったりすることなく、ビルトインのスタイルを上書きするために十分な特異性を持った CSS を記述できます。

      .video-js.video-js

例えば、ロード中のスピナーを上書きしたい場合、次のように書くことが考えられます。

      .video-js.video-js .vjs-loading-spinner {...}

これはデフォルトを上書きするには十分ですが、同じページに複数のプレーヤーが存在する場合を考えると、次のように書けば、他のプレーヤーには影響しません。

      .video-js{PLAYER_CLASS} .vjs-loading-spinner {...}

なお、{PLAYER_CLASS} セレクタは、プレーヤー設定のスタイルシート配列（Studio または Player Management API 経由）に追加された CSS ファイル内でのみ使用できます。このセレクタは、Videoタグ実装コードで <style></style> や <link></link> タグを使って別途追加した CSS では機能しませんのでご注意ください。