ステップバイステップ:プレーヤーのカスタマイズ
概要
このドキュメントでは、ページ内埋め込みで 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です。
高度なコード実装
上記のセレクターとスタイルで作業する場合、結果は次のように、プレーヤーの高度なコード実装で使用されました。
<!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-size
ems
単位として使用してサイズを制御できます。
ペンを見る5.xビッグプレイボタンのカスタマイズ Matt Boles( @mboles) オンCodePen。