カムタム プレーヤ テンプレートのご利用は、Brightcove Pro エディションおよび Enterprise エディションをご購入のお客様が対象になります。。ブライトコーブ アカウントのアップグレードについては、ブライトコーブにお問い合わせください。
プレーヤ テンプレートの Theme 要素を使用して、カスタム Brightcove プレーヤの外観をカスタマイズできます。Theme 要素と Style 要素のリファレンスについては、「BEML DTD リファレンス」を参照してください。
必要なカスタマイズの度合いに応じて、Theme 要素と Style 要素を使用することにより以下のことが可能です。
さらに、カスタム プレーヤ テーマおよびカスタム コンポーネント スキンを使用して、プレーヤをスタイル設定できます。
Theme 要素を使用して、テーマの構成が可能な表示コンポーネントすべてに対して、テーマを設定できます。テーマには、現在用意されている Deluxe、Flat、Minimal という 3 種類の中から 1 つを設定できます。name 属性を使用して、Theme 要素のテーマを設定します。
<Theme name="Deluxe" />
各テーマに対して、Theme 要素の style 属性を使用して、用意されている Light と Dark という 2 種類のスタイルのいずれかを設定できます。
<Theme name="Deluxe" style="Light" />
プレーヤ テンプレートに Theme 要素がない場合、Publishing モジュールでは、そのプレーヤ テンプレートに基づいたプレーヤのスタイルは変更できません。
代替手段として外部 CSS ファイルを使用し、プレーヤ テンプレートの全体スタイルを設定できます。Theme 要素の style 属性を使用して、プレーヤ テンプレートで用いられる CSS の構成に沿った CSS ファイルを指定します。
<Theme name="Deluxe" style="http://myserver/customStyle.css" />
指定する CSS ファイルは、標準プレーヤ テンプレートで用いられる CSS と同じパターンに従う必要があります。あとは、デフォルトのスタイルを上書きしたいプレーヤの表示コンポーネント用に、CSS をインクルードするだけです。標準プレーヤ テンプレートのコンポーネント用の CSS を含む zip ファイルをダウンロードできます。これらの CSS ファイルを見ると、Deluxe、Flat、および Minimal テーマと Light および Dark スタイルによって、ComboBox、List、TabBar、VideoDisplay、VideoPlayer、ChromelessVideoPlayer、TextRegion、TileList、および MediaControls コンポーネントのスタイルがどのように変わるかが分かります。さらに、この CSS ファイルを参照することができます。このファイルには、BEML サブコンポーネントおよびスタイル プロパティがコンポーネントごとにまとめられています。
プレーヤの他のドメインとの連携機能を制限する Flash のセキュリティ制約にご注意ください。CSS ファイルをホストするドメインで、crossdomain.xml ファイルに <allow-access-from domain="admin.brightcove.co.jp" /> を含める必要があります。
Theme 要素には、プレーヤ内の特定のコンポーネントや、コンポーネントのクラスに適用するインライン CSS を含む Style 子要素をいくつでも持たせることができます。各 Style 要素には、プレーヤのどのコンポーネントにスタイルの値を適用するのかを示すために、name 属性か id 属性が必須です。Style 属性には、<![CDATA[]]> タグの値として CSS も含まれます。コンポーネントのクラス、またはコンポーネントごとにスタイルを設定できます。
コンポーネントのクラスにスタイルを設定するには、<Style /> 要素の class 属性を使用します。たとえば、すべての Label コンポーネントの色を変えるには、class="Label" とします。
<Theme name="Deluxe" style="Light">
<Style class="Label">
<![CDATA[
.bodyText {
active: #777777;
}
]]>
</Style>
</Theme>
このケースでは、グレーを表す #777777 という値が、Label クラスのコンポーネントのインスタンスすべての bodyText に適用されます。bodyText 要素、titleText 要素、または linkText 要素に別々のテキスト スタイルを設定できます。
クラスのインスタンス 1 つに対して色の値を適用するには、スタイルを設定したいコンポーネントの ID を id 属性で指定します。
<Theme name="Deluxe" style="Light">
<Style id="mainTitle" >
<![CDATA[
.bodyText {
active: #777777;
}
]]>
</Style>
</Theme>
プレーヤ テンプレートの別の部分で、Label インスタンスを id 属性「mainTitle」で指定します。
<Label id="mainTitle" text="マイ プレーヤ" />
各プレーヤ テンプレートには、ラベルに適用されるデフォルトのスタイルがあります。たとえば、このデフォルトのラベル スタイルの Light バージョンの CSS は、以下のようになっています。
.background {
color: #FFFFFF;
}
.bodyText {
active: #000000;
rollover: #000000;
selected: #000000;
disabled: #666666;
}
.linkText {
active: #777777;
rollover: #B0C645;
selected: #B0C645;
disabled: #AAAAAA;
}
.titleText {
active: #000000;
rollover: #000000;
selected: #000000;
disabled: #666666;
}
このようなデフォルトのスタイルの色を優先しないようにするには、id 属性を「default」とした Style 要素を追加します。次に例を示します。
<Style id="default">
<![CDATA[
.bodyText {
active: #FFFFFF;
}
]]>
</Style>
プレーヤのラベル テキストに使用されるカスタム フォントを優先しないために同様の方法を利用できます。詳細は「プレーヤのフォント」を参照してください。
プレーヤ テンプレートを構成する要素の詳細については、以下を参照してください。