プレーヤのデザインおよびカスタマイズ

弊社では、プレーヤがデフォルトの構成である場合に、メディアのロードおよび再生が最も迅速にできるよう Brightcove プレーヤを設計しました。基本プレーヤには、パブリッシャや視聴者に多くの補足機能を強要することなく、メディアの再生および視聴者との対話に必要なものだけが含まれています。パブリッシャは、視聴者に最も高速の視聴経験を提供するため、必要な場合に限り、追加機能を選択できます。

個別の機能コンポーネント

Brightcove プレーヤでは、エンド ユーザに提供される基本 SWF 内に必要な機能がすべて含まれます。特定のプレーヤ テンプレートの定義によって必要となる場合にのみ、複数のバージョンのこの基本 SWF に追加のクラスが含まれます。たとえば、追加の UI 要素のない動画プレーヤのみを要求すれば、基本 SWF には、これらの余分な UI クラスは含まれません。自分の UI を作成し、Brightcoves 動画プレーヤが提供する UI なしに Brightcoves 動画表示ウィンドウを使用する場合、さらに小さな基本 SWF が提供され、ロードが高速化されます。

このトピックでは、プレーヤの設定を変更する方法について説明し、プレーヤで変更できる様々な設定を概観します。

Publishing モジュールの [設定の編集] ダイアログ ボックスでは、名前、アクセスまたは API の制限、ホスティング オプション、地域フィルタリング、検索オプション、説明文、動画プロモーション ツールなど、プレーヤのさまざまな設定や変更が可能です。

プレーヤをまだ作成していない場合、「Studio ジャンプスタート: Brightcove プレーヤを初めて作成する」にある指示に従って、作成してください。または、「Brightcove Studio の基礎」を参照して、Brightcove Studio の概要を把握してください。

このトピックでは、次の点について学習します。

このトピックでは、Brightcove プレーヤの外観および機能のカスタマイズで利用できるオプションについて概要を説明します。

Brightcove では、ユーザにメディアを提供するインタラクティブ エクスペリエンスの外観について、できる限り多くのコントロールを提供しています。カスタマイズのニーズに合わせて、また利用できるスキル、アカウントの Brightcove エディションに合わせて、いくつかのアプローチを利用することができます。

このトピックでは、Brightcove プレーヤの外観および機能のカスタマイズで利用できるオプションについて概要を説明します。

Brightcove では、ユーザーにメディアを提供するインタラクティブ エクスペリエンスの外観について、できる限り多くのコントロールを提供しています。カスタマイズのニーズに合わせて、また利用できるスキル、アカウントの Brightcove エディションに合わせて、いくつかの方法を利用することができます。

このトピックでは、Video Cloud プレーヤの外観および機能のカスタマイズで利用できるオプションについて概要を説明します。

この文書では、プレーヤの名前、ホスティング オプション、コード サポート、およびプレーヤ設定エディタの [グローバル] タブで設定される他のプロパティを変更する方法について説明します。

Video Cloud Studio からこれらのプレーヤ設定を編集するには、Publishing モジュールからプレーヤまたはプレーヤのグループを選択し、プレーヤのリストの下部で [設定] をクリックして、プレーヤ設定エディタの [グローバル] タブをクリックします。

プレーヤをまだ作成していない場合、Studio ジャンプスタート: Video Cloud プレーヤを初めて作成するにある指示に従って、作成してください。または、Video Cloud Studio の基礎を読んで概要を把握してください。

全プレーヤ設定の概要は、こちらを参照してください

この文書では、指定したドメインや地域でのみ表示されるよう、プレーヤ内の動画を制限する方法について説明します。

この文書では、プレーヤのラベル用言語を割り当てる方法について説明します。

プレーヤのラベルおよびメニュー用の言語を設定できます。それには、Video Cloud Studio の Publishing モジュールからプレーヤまたはプレーヤのグループを選択し、プレーヤのリストの下部で [設定] をクリックして、プレーヤ設定エディタの [言語オプション] タブをクリックします。

この文書では、プレーヤにプラグイン JavaScript ファイルまたは SWF を追加する方法について説明します。

この文書では、プレーヤのフルスクリーン動作と自動再生動作を変更する方法、またバンパー、ブランディング、バイラル プロモーション、および動画の最後にプレーヤに表示されるメニューの内容を設定する方法について説明します。

Video Cloud Studio からこれらのプレーヤ設定を編集するには、Publishing モジュールからプレーヤまたはプレーヤのグループを選択し、プレーヤのリストの下部で [設定] をクリックして、プレーヤ設定エディタの [動画プレーヤ] タブをクリックします。

プレーヤをまだ作成していない場合、Studio ジャンプスタート: Video Cloud プレーヤを初めて作成するにある指示に従って、作成してください。または、Video Cloud Studio の基礎を読んで概要を把握してください。

この文書では、プレーヤでプレイリストの各動画を続けて自動的に再生するよう設定する方法について説明します。

デフォルトでは、リストのいずれかの動画が最初に再生された後、プレイリストの動画が次々に続けて再生されます。選択したプレーヤ(複数可)の設定を編集するときに、[動画リスト] タブからこの機能を無効化できます。

 

プレーヤを作成した後で、プレーヤの外観にさまざまなカスタマイズを行うことができます。カスタマイズにより、プレーヤの外観を、組織のブランディング、プレーヤのコンテンツ、ページ デザインなど、プレーヤのデザイン要件に影響する要素に一致させ、強化できます。[スタイルの編集] ビューではプレーヤの各コンポーネントをカスタマイズでき、色とスタイルを事実上無限に組み合わせることが可能です。画像コンポーネント、背景画像、ラベル、およびクリックスルー URL もカスタマイズできます。

An introduction to styling players with the Publishing module.

How to limit playback to a whitelist of domains.

ユーザーのビデオ体験の外観をコントロールすることができるように、動画コンテンツのレイアウトやプレーヤへのコンテンツの割り当てに使用できる様々なオプションについて説明します。

プレーヤ テンプレートで、プレーヤの基本的な外観と機能が決まります。標準プレーヤ テンプレートのリファレンスでは、標準プレーヤの動作例を確認し、標準プレーヤ テンプレートをダウンロードしたり、また、プレーヤのレイアウトおよびサイズの詳細について学習できます。プレーヤを作成していない場合は、Publishing モジュールでプレーヤを作成するを読み、標準プレーヤ テンプレートの 1 つをベースにプレーヤを作成してください。

Brightcove Pro および Enterprise のパブリッシャは、Brightcove Experience Markup Language (BEML) を使用してプレーヤをカスタマイズすることもできます。

このトピックでは、Video Cloud の標準プレーヤ テンプレートすべてへのリファレンスを提供します。Video Cloud Studio でプレーヤを作成するとき、プレーヤのベースとなるプレーヤ テンプレートを選択します。このリファレンスでは、各プレーヤ テンプレートについて、プレーヤ テンプレートの BEML 定義のダウンロード、機能するプレーヤ例の表示、標準プレーヤのサイズおよび Photoshop のレイアウトについての学習ができます。

クロムレス プレーヤの外観、またはプレーヤの動画プレイリストの水平レイアウトと垂直レイアウトとの違いに関心があるかもしれません。これらの動作例を確認することによって、Video Cloud Studio で作成するプレーヤのタイプ、サイズ、およびレイアウトについて考えることができます。標準プレーヤ テンプレートおよび Photoshop レイアウト ファイルをダウンロードすると、プレーヤのルック アンド フィールをさらにカスタマイズできます。

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

プレーヤの例

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

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

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

カムタム プレーヤ テンプレートは、Brightcove Pro エディションおよび Enterprise エディションをご利用の方にのみ利用できます。 Brightcove アカウントのアップグレードについては、Brightcove にお問い合わせください。

Publishing モジュールでカスタム プレーヤ テンプレートを追加すると、標準の Brightcove プレーヤ テンプレートと同様に、カスタム プレーヤのインスタンスをいくつでも作成できるようになります。このトピックでは、以下の手順についても説明します。

視聴覚が不自由なユーザーに対して、アクセス可能なプレーヤおよび動画を作成すると、潜在的な視聴者を増やすことにつながります。また、このアクセスの幅を広げることは多くの官公庁、教育機関、企業の活動にとっても必要なことです。米国では、これらの要件は Section 508 として頻繁に引用されます。動画にキャプションをつけることにより、聴覚が不自由な視聴者のみばかりではなく、動画で使用されている言語が堪能でない視聴者にとってもさらにアクセスしやすくなります。

Accessible Video Player は、目や耳が不自由なユーザー向けの以下のようなアクセシビリティ機能をサポートする、標準 Video Cloud プレーヤ テンプレートです。

Accessible Video Player はシングル動画プレーヤです。そのため、プレイリストを直接サポートしません。

Accessible Video Player を使用してクローズド キャプションを提供する標準的な方法では、キャプション ファイルの URL を含むカスタム メタデータ フィールドを使用します。Brightcove の標準クローズド キャプション プラグインは、このカスタム メタデータ フィールドを必要とします。カスタム メタデータ フィールドは Brightcove Pro 版と Enterprise 版のパブリッシャにのみ利用可能なので、Brightcove Express をお使いの場合、このフィールドを使用してクローズド キャプションを提供する方法は利用できません。このトピックでは、すべての Brightcove パブリッシャに利用可能な他の方法について説明します。

手順の概要

ここでは、標準のクローズド キャプション プラグインのソース コードを編集し、それによりクローズド キャプション ファイルの URL のために特別なカスタム メタデータ フィールドを使用する代わりに、URL を別の方法で取得する手順を説明します。。この方法を使用するには、ActionScript コードを書きコンパイルするのに慣れている必要があります。

地理的またはドメイン上の制約や、コンテンツの使用不可などの理由により、Brightcove プレーヤをロードできない場合は、ページにはそれに対応するエラー メッセージが表示されます。デフォルトでは、これらのエラー メッセージは英語です。プレーヤのエラー メッセージをローカライズするには、以下の手順を実行します。

カスタマイズされたエラー メッセージ ファイルを作成します

デフォルトの英語のエラー メッセージ ファイルは、次のようなものです。