プレイヤーの外観のカスタマイズ-レガシースキン

このトピックは、new / styleing /customizing-player-appearance.htmlプレーヤーの外観をカスタマイズするための入門書です。コンテンツはChromeの開発ツールを使用していますが、最新のブラウザはすべて同等の機能を備えています。さまざまなブラウザーでの開発ツールの使い方の簡単な概要については、「 JavaScript デバッグの基本」を参照してください。

独自のスキンを作成する

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

プレイヤー

プレイヤーの見た目を変更することはできますが、まずそれに対処する方法が必要です。これを確認するには、プレーヤーの embed_in_page コードが挿入された HTML ページを参照します。の中に要素開発ツールのセクションで最初の場所を見つけます<div>値を持つクラスがあることがわかりますvideo-jsとりわけ、割り当てられました。

これを知ったら、スタイルを使ってプレイヤー自体を変更することができます。たとえば、プレーヤーのサイズを変更するには、このスタイルを使用できます。

<style>
  .video-js {
    width: 640px;
    height: 360px;
  }
</style>

iframeプレーヤー

プレーヤーのiframe実装を使用している場合、状況は異なります。あなたはまだプレーヤーを見るでしょうvideo-jsクラスですが、もちろん、iframe内にあります。

作成したスタイルは iframe のプレーヤーで引き続き動作しますが、CSS ファイルを作成し、Studio を使用してプレーヤーに関連付ける必要があります。これを行うには、 Players モジュールに移動し、CSSを関連付けるビデオをクリックし、プラグインセクションでCSSファイルのパスを追加します。

iframe自体をカスタマイズしたい場合は、を追加することでこれを行うことができますclassに属性iframe要素（27行目）。この場合、クラスの値はですvideoFrame。次に、<style>タグを使用して希望通りに変更します。下の例では、widthheightとが変更されています。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Customize iframe</title>

  <!-- Page styles -->
  <style>
    .videoFrame {
      width: 640px;
      height: 360px;
    }
  </style>
</head>

<body>
  <iframe class="videoFrame" src='//players.brightcove.net/1752604059001/68f30408-8fb4-431d-accb-8c5baa8c4790_default/index.html' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe>
</body>

</html>

[再生] ボタン

再生ボタンの外観を変更したい場合は、まずそれに対処する方法を知る必要があります。Chromeで、開発ツールが開いていることを確認し、ボタンを右クリックします。表示される選択肢から選択します要素を検査する。

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

上記の強調表示されたコードから、ボタンに割り当てられたクラスがであることがわかりますvjs-big-play-button。再生ボタンの色（虎に合わせる）と不透明度は、次のスタイルで変更されます。

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

このアプローチはうまくいくと思うでしょうが、そうではありません。CSS を操作するときは、プロパティの特異性を認識する必要があります。これは、ブラウザが関連性に基づいて要素に適用されるプロパティ値を決定する方法を指します。

ボタンの変更を適用する 1 つの方法は、CSS セレクタで ID を参照することです。これは、IDのCSSの特異性が高いためです。詳細については、 CSS の特異性のセクションを参照してください

まず、iddivプレーヤーコードの要素に属性を追加します。

    <video-js id="video_1"
      data-account="1752604059001"
      data-player="68f30408-8fb4-431d-accb-8c5baa8c4790"
      data-embed="default"
      class="video-js" controls></video-js>

    <script src="//players.brightcove.net/1752604059001/68f30408-8fb4-431d-accb-8c5baa8c4790_default/index.min.js"></script>

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

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

ボタンをダークグレーからオレンジに変更した結果は次のとおりです。

センター再生ボタン

次のスタイルを使用すると、再生ボタンを水平方向と垂直方向の両方に中央揃えできます。

top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;

再生ボタンを非表示

次のスタイルを使用すると、再生ボタンを完全に非表示にすることができます。

display: none;

実験

次の CodePen では、再生ボタンを試すことができます。再生ボタンの三角形は実際にはフォントであり、font-sizeそのサイズはスタイルで制御されることに注意してください。

ペンを見るビッグプレイボタンのカスタマイズ Matt Boles（ @mboles）オンCodePen。

進捗状況とボリューム

このドキュメントで最後に見た目のカスタマイズは、進行状況とボリュームインジケータの色を変更することです。次に示すように、両方のデフォルトの色はフクシアです。

ここでの課題は、要素のクラス名を見つけることです。上記と同じ手法を使用して、要素を右クリックして [ 要素を検査] を選択すると、進行状況インジケータ全体が表示され、ドリルダウンすると、vjs-play-progressクラス。

Chromeで要素パネル、マウスオーバーdivクラス名がvjs-play-progressプレーヤーで以下を確認するには：

Chromeのツールは、音量レベルの要素を確認するときに役立ちます。音量レベルは、音量ボタンをマウスオーバー（ホバー）したときのみ表示されます。正しい要素を検査して検出するときにボリュームレベルを表示するには、次の手順に従います。

音量ボタンを右クリックし、それを調べます
[ スタイル] セクションの右上にある [ 要素の切り替え] ボタン (下の青で強調表示) をクリックします。
要素を検査している間、マウスオーバーをシミュレートするには: ホバーボックス ([スタイル] セクションで赤で強調表示 ) をオンにします。
音量レベル要素が見つかるまでドリルダウンします（で赤で強調表示されています要素セクション）

今、background-colorこれらの要素の両方のスタイルを設定する必要があります。ボタンと同じ色にするので、ここに示すようにスタイルを変更します。

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

各クラスには、divプレイヤーの要素のIDをプレフィックスとして付けていることに注意してください。これにより、CSS の特異性に関するクラスの変更に関連性が提供されます。これについては、次のセクションで説明します。

結果は次のようになります。

この入門書では、プレーヤーのスタイリングについて簡単に説明しています。あなたが見てきたように、アプローチは、あなたが変更したい要素に対応するクラス名を見つけ、それをスタイルすることです。この文書の iframe セクションで説明したように、iframe プレーヤーを使用している場合は、ファイルにスタイルを配置し、curl ステートメントを使用してスタイルをプレーヤーに関連付ける必要があります。

カスタマイズをプレイヤー構成に追加し、プレーヤーが埋め込まれている場所に合わせて最適化し、プレーヤーと一緒に移動できるようにするのがベストプラクティスです。

可視性をコントロールします

コントロールが表示される時間の長さを指示できます。これを行うには、options().inactivityTimeoutプロパティを使用します。この値は、プレイヤー上のアクティビティの終了後にコントロールが表示される秒数に設定します。コントロールを常に表示したままにするには、値を 0 に設定します。

次のコードは、inactivityTimeoutに0、これにより、コントロールが常に表示されます。

<video-js id="myPlayerID"
  data-account="1752604059001"
  data-player="04ee9f58-9d08-43ea-803f-abda86776db2"
  data-embed="default"
  class="video-js" controls></video-js>
<script src="//players.brightcove.net/1752604059001/04ee9f58-9d08-43ea-803f-abda86776db2_default/index.min.js"></script>

<script>
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.options().inactivityTimeout = 0;
  });
</script>

コントロールバーのアイコンの順序

order番号が割り当てられたスタイルを使用して、コントロールバーのアイコンの順序を制御できます。たとえば、 5 の場合は、進行状況バーの後、音量ボタンの前にアイコンが配置され、 9 の場合はコントロールバーの右端にアイコンが配置されます。古いブラウザでは、次に示すように、さらにいくつかのスタイルが必要になる場合があります。

{
  order: 5; /* after the progress bar but before the volume button */
  -webkit-box-ordinal-group: 5;
  -moz-box-ordinal-group: 5;
  -webkit-order: 5;
  -ms-flex-order: 5;
}

Brightcove Player のサンプルに、アイコンを追加する例（この場合はファイルをダウンロードする）を示します。ビデオプラグインのドキュメントをダウンロードします。

CSSの特異性

CSS の特異性とは、ブラウザが関連性に基づいて要素に適用されるプロパティ値を決定する方法を指します。この概念の詳細については、「特異性」の記事を参照してください。

Chrome で、大きな再生ボタンを調べます。backgroundプロパティは複数のクラスを使用して設定されていることに注意してください。つまり、このプロパティをオーバーライドするために 1 .vjs-big-play-buttonつのクラスだけを使用することはできません。

ビッグプレイボタンをカスタマイズするには、次の 3 つの方法を示します。

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

ID を参照する

id属性は CSS の特異性に関して高い関連性を持つため、CSS idセレクタに a を追加すると、background-colorプロパティ。

まだ行っていない場合は、idvideo次のように要素に属性を追加します。

    <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 で、.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 つのクラスが必要です。

.video-js.vjs-big-play-buttonクラスをクラスセレクタに追加します。.video-jsクラスはビデオコンテナに設定されていることに注意してください。

これらの値で、我々は、vjs-big-play-button.video-jsクラス名の要素のdecendentsであるクラス名を持つすべての要素を選択と言っています。

<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 を追加するコードを追加します。

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>

大きな再生ボタンがオレンジ色になったことがわかります。