ステップバイステップ:プレーヤーのカスタマイズ

In this topic, hands-on steps are provided that when followed customizes the appearance of the Brightcove Player. To customize the appearance of the Brightcove Player you need to use Cascading Style Sheets (CSS). This document will go through the process of changing the appearance and location of the play button that initially overlays the video.

概要

このドキュメントでは、ページ内埋め込みで CSS を使用することと、プレーヤーの iframe の実装がまったく異なるため、いくつかのセクションがあります。

このドキュメントのコンテンツでは Chrome の開発ツールを使用していますが、最新のブラウザはすべて同等の機能を備えています。さまざまなブラウザーでの開発ツールの使い方の簡単な概要については、「デバッグの基本」ドキュメントを参照してください。

プレイヤーセレクターを決定する

CSS セレクターを使用すると、ページ上の HTML 要素を選択して操作できます。CSS セレクターは、ID、クラス、タイプ、属性などに基づいて HTML 要素を「検索」（または選択）するために使用されます。HTML ページ上の要素の外観を変更しようとするときに最初に行う必要があるのは、要素のアドレス指定に使用するセレクターを決定することです。次の手順は、プレーヤーのセレクターを見つけて、プレーヤーのサイズを変更する方法を示しています。

Video Cloud Studio で、メディアモジュールを開き、公開するビデオを選択します。
ビデオを再生するプレーヤーを選択します。
をセットするサイジング、アスペクト比とプレーヤーのサイズ。
[ 詳細設定] 発行コードをコピーします。
HTML エディタを使用して、新しい HTML ページを作成します。
HTML ページの本文に公開コードを貼り付けます。
新しく作成したページを参照します。
ブラウザの開発ツールを開き、HTML コードを調べて HTML <video-js>にドリルダウンしてタグを見つけます。が表示されます<video-js>タグには、という名前のクラスがありますvideo-js。<video-js>タグには常にのクラスがありますvideo-js。プレイヤーをスタイリングするときは、video-jsこのクラスを頻繁に利用します。
下のスクリーンショットをチェックして、クラスが赤で強調表示されます。緑で強調表示されているのは<video-js>タグ、もちろん、BrightcovePlayerです。

再生ボタンセレクター

別のアプローチは、再生ボタンのセレクターを見つけるために使用されます。次の手順では、再生ボタンの正しいセレクターを検索し、その外観を変更する方法を示します。

HTML ページを参照します。
プレーヤーをオーバーレイする再生ボタンを右クリックし（最初の右クリックでブライトコーブのプレーヤー情報が表示されるので、右クリックを2回行う必要があります）、インスペクト（Inspect）を選択します。
注意してください<div>強調表示されているタグは再生ボタンを表し、クラスはvjs-big-play-button。
再生ボタンの色と不透明度を変更するCSSを含めるようにスタイルを変更します。
```
<style>
  .vjs-big-play-button {
    background-color: red;
    opacity: .3;
  }
</style>
```
ページを参照すると、すべてのスタイルが使用されているわけではありません。ボタンは赤ではありません。
開発者ツールの右側を見ると、スタイルの概要が表示されます。下を見て、背景を赤に変更すると、背景が横切られていることが表されます。

注:Safari では、スタイルがオーバーライドされていてもスタイルが外れない場合があります。

何が起こったかは、背景色に多数の変更が加えられていることです。設定したスタイルは CSS の「カスケード」部分で上書きされています。これは、特異性と呼ばれるCSSの機能を利用することで変更できます。特異性は、ブラウザによって適用される CSS ルールを決定し、カスケードスタイルシート (CSS) ルールの表示方法に関係する重み付けのタイプです。特異性を使用すると、スタイルを他のものよりも重要にし、強制的に使用させることができます。「プレーヤーの外観のカスタマイズ」ドキュメントには、CSS の特異性について簡単に紹介し、検索には多数の参照情報があります。
この場合、video-jsクラスを使用すると、スタイルが優先されます。新しい組み合わせセレクターを使用するようにスタイルを変更します。最後のクラスの前にスペースが 1 つあることに注意してください（その理由の詳細は、特異性のルールに記載されています）。
```
<style>
  .video-js .vjs-big-play-button {
    background-color: #ff0000;
    opacity: .3;
  }
</style>  
```
ページを参照して、すべてのスタイルが適用されているか確認します。
デベロッパーツールの右側をもう一度見ると、スタイルの概要が表示されます。これで、背景色の変更が上書きされないことがわかります。

高度なコード実装

上記のセレクターとスタイルで作業する場合、結果は次のように、プレーヤーの高度なコード実装で使用されました。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js .vjs-big-play-button {
      background-color: red;
      opacity: .3;
    }
  </style>
</head>

<body>

  <video-js data-account="1507807800001"
    data-player="default"
    data-embed="default"
    controls=""
    data-video-id="6065136830001"
    data-playlist-id=""
    data-application-id=""
    width="640" height="360">

  </video-js><script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>

</body>

</html>

これは HTML ページで CSS を使用する非常に一般的な方法です。<style><video-js>ブロックがタグ付きのページにあることがわかります。

注:CSSのエクスペリエンスによっては、id<video-js>上記のコードがタグに属性を割り当てなかった理由が不思議になるかもしれません。そうすれば、のようなセレクターを使うことができます#myPlayer .vjs-big-play-button。実際、あなたは持っていた可能性があり、それはうまくいったでしょう。問題は、iframe Player 実装を使用するときに id セレクターを使用して作成された CSS が機能しないため、既存のクラス名のみが使用されていることです。id属性を使用しないことで、スタイルはiframeプレーヤーの実装に直接適用されます。

標準コードの実装

標準 (iframe) のコード実装では、驚くことではありませんが、Brightcove Playerは iframe に配置し、HTML ページに配置します。例えば、iframe を含むページのスタイルを使用して、実際の iframe 自体のスタイルやサイズを変更することはできますが、iframe のページ上のスタイルは iframe 自体にカスケードされません。iframe は文字通り、別の HTML ページを取り込むので、iframe のコンテンツに必要なスタイルは iframe 内の HTML ページに関連付ける必要があります。

Brightcove Playerの iframe 実装を使用する場合、CSS を適用する手順は次のとおりです。

インターネットアクセス可能なファイルにスタイルを配置する
スタイルシートをプレーヤーにリンクする (Studio またはプレーヤー管理 API を使用して実行)

注:次の手順は、前の手順で完了し、上記のコードスニペットに示した HTML から作業することを前提としています。それを実例として残したい場合は、コードを別のファイルにコピーし、新しいファイルで次の手順を開始します。

Studio で、ビデオを公開し、プレーヤーの iframe 実装のコードをコピーします。
HTML ページで、ページ内埋め込みコードを iframe コードに置き換えます。

HTML ページが次のようになっていることを確認します。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <style>
    .video-js .vjs-big-play-button {
      background-color: red;
      opacity: .3;
    }
  </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>

ページを参照すると、ボタンのスタイルが使用されていないことがわかります。
customize-qs.cssという名前のファイルを作成し、インターネットにアクセス可能な場所に保存します。
ボタンのスタイルを切り取り、ファイルに貼り付けて保存します。ボタンのスタイルのみを切り取って、<style>タグを含めることはできません。このファイルには、次のコンテンツのみを含める必要があります。
```
.video-js .vjs-big-play-button {
  background-color: red;
  opacity: .3;
}
```

HTML ページが次のようになっていることを確認してください。

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
</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>

Studio で、 Playersモジュールに移動し、このクイックスタートに使用しているプレーヤーを編集します。
左側のナビゲーションメニューで [ プラグイン ] をクリックします。
クリックスタイルシート、そうしてスタイルシートを追加するボタンをクリックし、パスを入力します。
[ 保存] をクリックして、変更を保存します。ページの右側にあるプレビュープレーヤーが更新され、ボタンに適用された CSS スタイルが表示されます。
プレーヤーを公開するには、[ 公開と埋め込み] > [変更を公開] をクリックします。
開くダイアログを閉じるには、[ 閉じる] をクリックします。
ブラウザに戻り、ページを更新します。パブリッシュされた変更がアクティブになると、iframe プレーヤーに適用されたスタイルが表示されます。公開済みの変更が表示されるまで数分かかることがあります。

スタイルを探索

このセクションでは、CodePen を使用して、スタイルを探索し、上に示したものよりも大きな再生ボタンをカスタマイズすることができます。お好きな見た目になったら、生成された CSS をコピーして、上記のようにどちらかのプレイヤーの実装で使用できます。

混乱しているように見えるかもしれない問題の 1 つは、ボタンの実際の矢印が画像ではなくフォントファミリーの一部であることです。そのため、font-sizeems単位として使用してサイズを制御できます。

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