カスタム プレーヤ テーマ

カスタム テーマを使用すれば、動画プレーヤ テンプレートの外観をきめ細かく調整することができます。BEML と Flash で作成した カスタム SWF ファイルを使用すると、プレーヤのほぼすべての部分の外観をコントロールできます。たとえば、プレーヤのアイコン セットのカスタマイズ、ボタン状態の変更、さらにはプレーヤ要素の不透明度の微調整も可能です。この機能には Flash の利用が必要ですが、難しい Flash 開発者のスキルは必要ありません。このドキュメントでは、カスタム テーマを作成し適用する方法の基本を順を追って説明します。

プレーヤの例

カスタム テーマを使用して、できることの例を示します。

適用前のクロムレス プレーヤ

これは、デフォルトの「Deluxe」テーマを使用したクロムレス動画プレーヤです。

適用後のクロムレス プレーヤ

単一のカスタム テーマ SWF を使用して、この動画プレーヤのほぼすべての部分をカスタマイズしました。使用したファイルのソースをダウンロードして、詳しく確認してください。このプレーヤの BEML プレーヤ テンプレートをダウンロードすることも可能です。

この 1 つのファイルで、次のことができました。

• ボタンの背景を非表示にする
• 再生/一時停止アイコンをテキストに変更する
• 共有、最小化、およびボリュームのアイコンを大きなものと交換する
• 各アイコンの up、over、down、および disabled 状態を変更する
• プレイヘッドおよびプレイヘッド背景のスタイルを変更する
• 新しいプレイヘッド要素と一致するようにボリューム コントロールを更新する
• ボリューム コントロールのプラス/マイナス アイコンを変更する

クロムレス プレーヤ コントロールのレイアウトのカスタマイズに関する詳細は、ここをクリックしてください。

カスタム テーマを作成する方法

1. 各 Brightcove プレーヤ コンポーネント用の Flash ファイル（.fla）を含む .zip ファイルをダウンロードします。
2. 編集したいコンポーネント用の .fla ファイルを開きます。この例では、ChromelessVideoPlayer.fla を使用します。Flash ファイルを開くとステージが空であることに注意してください。
3. ライブラリの要素を選択し、ダブルクリックしてステージで開きます。ライブラリ要素の名前やエクスポート リンケージまたはフレームやシンボル インスタンスの名前を変更しないでください。変更すると、プレーヤはそれらを認識しません。この例では、CVPButtonSkin スキンを使用します。
   
4. 選択した要素に希望の変更を加えます。この例では、ボタン スキンの色を変更し、境界線および角丸コーナーを削除しました。作成した形が、BEML で指定されたサイズより大きいまたは小さい場合、サイズが変更されることに注意してください。
   
   これらの変更をクロムレス プレーヤに適用すると、次のようになります。
   
   配置がプレーヤ内で適切になるように、要素は必ず X=0、Y=0 に配置します。X、Y 座標は Flash のプロパティ パネルで編集できます。
   
5. （たとえばボタン スキン、アイコン スキンなど）複数の状態があるスキンを編集している場合、タイムライン上の 4 つの状態をすべて編集してください。
   
   形に拡大・縮小の程度を示すために、スケール 9 ラインを配置します。たとえば、角丸コーナーを使用している場合、スケール 9 ラインが丸い端をカットしないように気をつけます。カットしていると、サイズ変更が正しく行われません。下の例では、スケール 9 ラインの配置であるため、コーナーは均一に拡大・縮小しません。
   
6. 希望の変更をすべて行った後、SWF をエクスポートします。プレーヤのロード時に 1 つの外部ファイルをロードするだけで済むように、ほとんどの場合では複数のコンポーネントから 1 つの SWF にテーマをエクスポートします。

カスタム テーマを適用する方法

カスタム テーマを作成して、それを SWF としてエクスポートした後、BEML を使用して、カスタム プレーヤ テンプレートに追加する必要があります。

1. サーバーでテーマ SWF をホストします。
2. BEML で、希望のコンポーネントをポイントするテーマ属性を追加します。次のコンポーネントにカスタム テーマを適用できます。
   
   • VideoPlayer
   • ChromelessVideoPlayer
   • VideoDisplay
   • List
   • TileList
   • ComboBox
   • TabBar
   • MediaControls
   • TextRegion
   次に例を示します。

   <ChromelessVideoPlayer id="videoPlayer" 
        theme="http://fungus.example.com/ChromelessVideoPlayerTheme.swf"> 

プレーヤの他のドメインとの連携機能を制限する Flash のセキュリティ制約を忘れないでください。カスタム テーマ SWF ファイルをホストするドメインでは、crossdomain.xml ファイルに <allow-access-from domain="admin.brightcove.com" /> <allow-access-from domain="admin.brightcove.co.jp" />を含める必要があります。

注意と制約事項

• 現在のところ、Brightcove メニュー画面（情報、リンクの取得、埋め込みなど）にはカスタム テーマを適用できません。（テキストのフォントまたはサイズの変更など）メニューをカスタマイズしたい場合、メニューを覆うカスタム コンポーネントを作成し、SWFLoader 要素でプレーヤ テンプレートにインポートすることを考慮してください。
• テーマには up、over、down、disabled 状態を指定できますが、これらの状態間のアニメーションは指定できません。
• 一部の BEML コンポーネントには showBack 属性があります。この属性では、グラフィックの背景を表示するかどうかを制御します。コンポーネントに showBack="false" が指定されていると、カスタム スキンは表示されません。

プレーヤ テンプレートをスタイリングする他の方法

BEML のカスタム テーマの他に、個々のプレーヤまたはプレーヤ テンプレートをスタイリングする方法は他にも多くあります。

Brightcove Studio Publishing モジュールのスタイル エディタ

• デフォルトのテーマを設定して、プレーヤの全体的な外観を変更する
• コンポーネント要素の個々の色を変更する
• 画像を追加または修正する

BEML

• style 要素を使用して、BEML コンポーネントに CSS を適用する
• BEML の theme 要素を使用して、プレーヤ テンプレートのテーマを設定する

カスタム コンポーネント スキン

• カスタム コンポーネント スキンは、カスタム テーマに似ていますが、少数のプレーヤ要素のスキンに使用する場合または Flash を利用できない場合に最適です。