「クイックスタート:プレイヤーのカスタマイズ-レガシースキン
このトピックでは、に従って 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
下のブロックは、head
HTMLページのセクションの末尾のすぐ上に配置する必要があります。CSSの用語では、これはクラスセレクタの使用例です。<style> .video-js { height: 344px; width: 610px; } </style> </head>
- HTMLページを保存して閲覧すると、プレーヤーの新しいサイズが表示されます。
ページ内埋め込み
上記のセレクターとスタイルを操作する場合、結果は次のように、プレーヤーのページ内埋め込み実装で使用されました。
<!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
要素として。ここに示すようにwidth
height
、同じままにします: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
単位として使用します。