「クイックスタート:プレイヤーのカスタマイズ-レガシースキン
このトピックでは、に従って Brightcove Player の外観をカスタマイズするための実践的な手順について説明します。Brightcove Player の外観をカスタマイズするには、カスケードスタイルシート（CSS）を使用する必要があります。このドキュメントでは、最初にビデオをオーバーレイする再生ボタンの外観と場所を変更する手順について説明します。
概要
このドキュメントでは、ページ内埋め込みで CSS を使用することと、プレーヤーの iframe の実装がまったく異なるため、いくつかのセクションがあります。
このドキュメントのコンテンツでは Chrome の開発ツールを使用していますが、最新のブラウザはすべて同等の機能を備えています。さまざまなブラウザーでの開発ツールの使い方の簡単な概要については、「デバッグの基本」ドキュメントを参照してください。
プレイヤーセレクターを決定する
CSS セレクターを使用すると、ページ上の HTML 要素を選択して操作できます。CSS セレクターは、ID、クラス、タイプ、属性などに基づいて HTML 要素を「検索」（または選択）するために使用されます。HTML ページ上の要素の外観を変更しようとするときに最初に行う必要があるのは、要素のアドレス指定に使用するセレクターを決定することです。次の手順は、プレーヤーのセレクターを検索し、プレーヤーのサイズを変更する方法を示しています。
- Video Cloud Studio で Media モジュールを開き、公開するビデオを選択します。
- ページ内発行コードをコピーします。
- HTML エディタを使用して、新しい HTML ページを作成します。
- HTML ページの本文に公開コードを貼り付けます。
- 新しく作成したページを参照します。デフォルトでは、プレーヤーのサイズは300×150ピクセルのデフォルトのサイズになります。
- ブラウザーの開発ツールを開き、HTML にドリルダウンして、
divプレーヤーを囲むタグを見つけます。divタグにはのクラスがあることがわかりますvideo-js。divプレイヤーを含むには、常にのクラスがありますvideo-js。video-jsはプレーヤーをスタイリングするときに必要なクラス名です。 - 下のスクリーンショットをチェックして、赤でハイライトされたクラスを確認してください。緑色で強調表示されているのは、BrightcovePlayerであるビデオタグです。
- CSSセレクターに使用する正しいクラスがわかったので、そのクラスセレクターを使用してプレーヤーのサイズを変更できます。
style下のブロックは、headHTMLページのセクションの末尾のすぐ上に配置する必要があります。CSSの用語では、これはクラスセレクタの使用例です。<style> .video-js { height: 344px; width: 610px; } </style> </head> - HTMLページを保存して閲覧すると、プレーヤーの新しいサイズが表示されます。
再生ボタンセレクタ
別のアプローチは、再生ボタンのセレクターを見つけるために使用されます。次の手順では、再生ボタンの正しいセレクターを検索し、その外観を変更する方法を示します。
- HTML ページを参照します。
- プレーヤーをオーバーレイする再生ボタンを右クリックし、[ 要素を検査] を選択します。
- 注意してください
div強調表示されているタグは再生ボタンを表し、クラスはvjs-big-play-button。
- スタイルを変更して、再生ボタンの色と不透明度を変更するCSS（17〜18行目）を含め、ボタンをプレーヤー内の中央に配置します（19〜23行目）。
<style> .video-js { height: 344px; width: 610px; } .vjs-big-play-button { background-color: red; opacity: .3; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> - ページを参照すると、すべてのスタイルが使用されているとは限りません。ボタンは赤ではありません。
- 開発者ツールの右側を見ると、スタイルの概要が表示されます。下を見て、背景を赤に変更すると、背景が横切られていることが表されます。
何が起こったかは、背景色に多数の変更が加えられていることです。設定したスタイルは CSS の「カスケード」部分で上書きされています。これは、特異性と呼ばれるCSSの機能を利用することで変更できます。特異性は、ブラウザによって適用される CSS ルールを決定し、カスケードスタイルシート (CSS) ルールの表示方法に関係する重み付けのタイプです。特異性を使用して、あなたのスタイルを他のものよりも重要にし、強制的に使用することができます。「プレーヤーの外観のカスタマイズ-レガシースキン」ドキュメントには、CSS の特異性について簡単に紹介し、あらゆる検索で多数の参照情報があります。
- 注意してください
divタグはプレーヤーを囲み、それに関連付けられた多数のクラスがあります。
- この場合、
video-jsそしてvjs-mouse優先するためにあなたのスタイルを「ブースト」します。スタイルを変更して、新しい組み合わせセレクタを使用します。最初の 2 つのクラスの間にスペースはありませんが、最後のクラスの前に 1 つあります (理由の詳細は、特異性の規則に記載されています)。.video-js.vjs-mouse .vjs-big-play-button { background-color: #ff0000; opacity: .3; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } - ページを参照して、すべてのスタイルが適用されているか確認します。
- デベロッパーツールの右側をもう一度見ると、スタイルの概要が表示されます。これで、背景色の変更が上書きされないことがわかります。
ページ内埋め込み
上記のセレクターとスタイルを操作する場合、結果は次のように、プレーヤーのページ内埋め込み実装で使用されました。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Embed in page tester</title>
<style>
.video-js {
height: 344px;
width: 610px;
}
.video-js.vjs-mouse .vjs-big-play-button {
background-color: red;
opacity: .3;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin: auto;
}
</style>
</head>
<body>
<video
data-video-id="4443311217001"
data-account="1507807800001"
data-player="30a9c9e0-295b-4102-a7af-a3f86bba91ab"
data-embed="default"
class="video-js" controls></video>
<script src="//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.min.js"></script>
</body>
</html>
これは、HTMLページでCSSを使用する非常に一般的な方法です。あなたが見るstyleブロックはページ上にありますvideoタグ。
iframe
iframe の実装では、驚くことではありませんが、Brightcove Playerは iframe に配置し、HTML ページに配置します。実際のiframe自体のスタイルを設定したり、例えばiframeを含むページのスタイルを使用してサイズを変更することはできますが、iframeのページ上のスタイルはiframe自体にカスケードされません。iframe は文字通り、別の HTML ページを取り込むので、iframe のコンテンツに必要なスタイルは iframe 内の HTML ページに関連付ける必要があります。
Brightcove Playerの iframe 実装を使用する場合、CSS を適用する手順は次のとおりです。
- インターネットアクセス可能なファイルにスタイルを配置する
- スタイルシートをプレーヤーにリンクする (Studio またはプレーヤー管理 API を使用して実行)
- Studio で、ビデオを公開し、プレーヤーの iframe 実装のコードをコピーします。
- HTML ページで、ページ内埋め込みコードを iframe コードに置き換えます。
- 変更
.video-jsクラスセレクターから要素セレクターへの使用iframe要素として。ここに示すようにwidthheight、同じままにします：iframe { height: 344px; width: 610px; } - HTML ページが次のようになっていることを確認してください。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>iframe tester</title> <style> iframe { height: 344px; width: 610px; } .video-js.vjs-mouse .vjs-big-play-button { background-color: red; opacity: .3; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } </style> <body> <iframe src='//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.html?videoId=4443311217001' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe> </body> </html> - ページを参照すると、iframe プレーヤーのサイズが正しく設定されていることがわかります。前述のように、ボタンのスタイルは機能しません。
- customize-qs.css という名前のファイルを作成し、インターネットにアクセスできる場所に保存します。
- ボタンのスタイルをカットし、ファイルに貼り付けて保存します。ボタンのスタイルのみを切り取って、
styleタグを含めることはできません。このファイルには、次の内容のみが含まれている必要があります。.video-js.vjs-mouse .vjs-big-play-button { background-color: red; opacity: .3; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; } - HTML ページが次のようになっていることを確認してください。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>iframe tester</title> <style> iframe { height: 344px; width: 610px; } </style> <body> <iframe src='//players.brightcove.net/1507807800001/30a9c9e0-295b-4102-a7af-a3f86bba91ab_default/index.html?videoId=4443311217001' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe> </body> </html> - Studioで、 Players モジュールに移動し、このクイックスタートで使用しているプレーヤーを編集します。
- 「プラグイン」セクションを見つけて、「編集」ボタンをクリックします。
- クリックCSS次に示すように、CSSファイルへのパスを入力して入力します。
- クリック保存するに変更を保存するにはプラグインセクション。
- ページの上部にあるをクリックします公開するプレーヤーを公開します。
- ブラウザに戻り、ページを更新します。パブリッシュされた変更がアクティブになると、iframe プレーヤーに適用されたスタイルが表示されます。公開済みの変更が表示されるまで数分かかることがあります。
スタイルを探る
このセクションでは、JSBinを使用して、スタイルを探索し、上に示したものよりも大きな再生ボタンにカスタマイズすることができます。あなたが好きな外観を取得したら、あなたは単に生成されたCSSをコピーし、上記のようにいずれかのプレーヤーの実装でそれを使用することができます。
混乱しているように見えるかもしれない問題の 1 つは、ボタンの実際の矢印が画像ではなくフォントファミリーの一部であることです。そのため、font-sizeを使用してサイズを制御し、ems単位として使用します。