プレーヤのカスタマイズ オプション

Product
Video Cloud
対象となる役割
パブリッシャ, 開発者
バージョン
Brightcove 5
エディション
すべて
作成者 Jessica Nutting.

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

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

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

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

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

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

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

多くの場合、上記方法のうちの 2 つ以上を組み合わせることができますが、BEML で作成したカスタム プレーヤ テンプレートは Video Cloud Pro および Enterprise パブリッシャのみが使用できることにご注意ください。これらの Video Cloud プレーヤ カスタマイズ機能の性能について見てみましょう。

Publishing モジュールでのスタイルの設定

各プレーヤは、多くの標準プレーヤ テンプレートの 1 つから作成されたか、BEML カスタム プレーヤ テンプレートから作成されたかにかかわらず、Video Cloud Studio の Publishing モジュールで表示、編集が可能です。Publishing モジュールの[Edit Styles] ビューではプレーヤの各コンポーネントをカスタマイズでき、色とスタイルを事実上無限に組み合わせることが可能です。たとえば、プレーヤのボタンの色を指定し、ボタンのテキストとアイコンには別の色を指定し、ボタンの通常状態、ロールオーバー状態、無効化状態のそれぞれについて別の色を指定することができます。これは、プログラミングの知識や特殊な構文の必要のない、わかりやすい WYSIWYG ユーザー インターフェースを使用して行います。Publishing モジュールでのプレーヤのスタイリングの詳細についてはこちらをお読みください。

BEML を使用してカスタム プレーヤ を作成する

Video Cloud Experience Markup Language（BEML）は、Video Cloud パブリッシャが、メディア視聴体験での外観を完全にコントロールできるよう設計されました。標準の Video Cloud プレーヤ テンプレートは、最低限の手間だけで、動画をプログラムし Web 上に掲載できる、ということに対して、BEML は、タグや HTML のようなマークアップ言語の基本的知識以外のプログラム知識や技術知識の必要なく、幅広いテンプレートが開発できます。

BEML では、どの Video Cloud UI 要素が、どのサイズで、プレーヤのどの位置に表示されるかを、正確に指定することができます。また、BEML で使用できるタグを利用して、リキッド レイアウト（異なる埋め込み寸法に基づいて、要素がリサイズ、リポジションされる）のプレーヤを簡単に作成できます。シンプルなバインド構文により、設計者は異なる要素をプレーヤ内でまとめることができ、リスト内の要素、または現在再生中の動画について、ラベル内の動画タイトルなどのデータを目立たせることができます。BEML ではまた、テンプレート設計者は、プレーヤ内のグラフィック テーマやスタイルをオーバーライドし、すべてのプレーヤ内のブランディングを矯正し、ラベルの新しい値を設定し、各種ボタンのクリックから生じる動作をコントロールすることができます。

通常であれば、ActionScript または JavaScript を使用したカスタム開発が必要なプレーヤ デザインを、Video Cloud が提供する BEML およびデフォルトの BEML コンポーネントを使用して実現できます。BEML によるカスタム プレーヤ テンプレートの作成の詳細についてはこちらをお読みください。

グラフィックのテーマおよびスタイル

Video Cloud プレーヤで表示されるユーザー インターフェース コンポーネントは、BEML、Video Cloud Studio の Publisher モジュール、またはランタイム API インタラクションによりスタイル設定できます。これらのインターフェースにより、メディア視聴体験のグラフィック外観を、パブリッシャ毎に、またはプレーヤ毎に、好みにより大きく変更することができます。

Video Cloud では、すべてのコンポーネントについて、Deluxe、Flat、Minimal の 3 つのメイン テーマを提供しています。各複合 UI コンポーネント（List や VideoPlayer など）のテーマを、BEML テンプレートから設定できます。あるいは、プレーヤ全体のテーマを、Publishing モジュールのプレーヤ スタイル設定から設定することもできます。これらの同じスタイル設定が、テキストのロールオーバー状態から、リスト項目の背景まで、1 つのコンポーネントの各面について個別に色を変えるインターフェースを提供します。

色は、プレーヤがサポートする CSS からも設定できます。これは BEML テンプレート内に含むこともできますし、外部スタイル シートからロードすることもできます。これらの色はランタイム時、およびプレーヤの JavaScript または ActionScript API を通じて設定できます。

Video Cloud UI コンポーネントは、BEML テンプレート内で指定されているパブリッシャ定義によるグラフィックでスキンを変更することも可能です。動画プレーヤ背景、アイコン、ボタン スキンはすべて、Video Cloud プレーヤのパブリッシャのサイトへのシームレスな統合を可能にするグラフィックでアップデートできます。また、多くの BEML コンポーネントについてカスタム テーマを作成することができます。

ラベルのローカライズ

Video Cloud プレーヤは、お客様がメディアを配信する様々な地域に合わせてローカライズが可能です。Publishing モジュールを使用して、ボックス内のすべての要素について、6 種類の言語に翻訳されたラベルを使用するようプレーヤを設定することができます。また、自身の XML 翻訳ファイルかプレーヤ用の BEML を使用して、これらのラベルの設定を完全に管理できます。

プレーヤ内のすべてのラベルを変更する必要がある場合、プレーヤが要求する形式にマッチする翻訳を XML ファイルから選ぶだけです。Publishing モジュールのプレーヤ設定でこのファイルを指定する（この場合、同一テンプレートの異なるプレーヤ インスタンスについて異なる翻訳を提供することもできます）か、BEML 内のファイルへのパスを入力してプレーヤ テンプレートを指定する（この場合、プレーヤのすべてのインスタンスが、同じデフォルトのカスタム翻訳を受け取ります）ことができます。

また、BEML は個別ラベルのテキストの修正、正確なテキストを指定した（必要な場合）BEML 内の新規ラベル要素の作成もサポートしています。プレーヤのローカライズについて詳しくはこちらを参照してください。

Player API による拡張性

Video Cloud プレーヤには、すぐに利用できる多くの機能が備わってしますが、さらに外観や動作のカスタマイズを必要とするパブリッシャがあることを弊社では認識しています。パブリッシャに対して、拡張可能でできるだけ簡単な方法で追加できる機能を持つプレーヤを提供するため、プレーヤ内部のかなりの部分を空けて、開発者（パブリッシャまたは技術パートナ）が必要な追加機能やカスタム エクスペリエンスを作成できるよう、フックさせることのできる数百もの API コマンドを表示させました。プレーヤ API の基礎についてはこちらをお読みください。

JavaScript と ActionScript インターフェース

Video Cloud プレーヤは、Flash Player を使っているデスクトップに配信され、JavaScript と ActionScript インターフェースの両方をサポートしています。2 つのインターフェースは、同じオブジェクトとメソッドを提供しますので、開発者は使い慣れた方の言語を使用して作業することができます。どちらの言語も ECMAScript から派生しており、各言語について Video Cloud が表示する API は、実装の際に可能なかぎり類似させていますので、Video Cloud プレーヤでの作業中に一方の言語からもう一方の言語に移動するのは、比較的容易なプロセスです。

どちらの API 実装も、プレーヤとの同期コミュニケーションができますので、直接メソッドを呼び出し、応答を受け取ることができます。バックエンドへの同期呼び出しの必要なメソッドについては、データのロードの再にリスナが通知を受け取るよう設定することができます。プレーヤからブロードキャストされるどんな種類のイベント（ユーザー インタラクションから、メディア再生、プレーヤ表示の変更まで、数十種類あります）にも同一のイベント モデルが使用されます。

表示される追加機能

Video Cloud のプレーヤ API は、プレーヤの標準機能のコントロールとアクセス（メディア再生やコンテンツのロードなど）を可能にするだけでなく、API がなければ利用できない追加の機能も提供します。そのような機能には、カタログ検索、同期キャプション、メディア内に設定されたキュー ポイントの発生などを可能にするモジュールが含まれます。

API とこれらの機能モジュールを使用することにより、パブリッシャは、プレーヤに事前に組み入れられているテンプレートでは利用できない機能を追加追加することができます。パブリッシャは、自身で、または Video Cloud アライアンスのパートナを通じて、カタログ検索や、字幕スーパー、サードパーティによるレポート サービスの呼び出し、カスタム広告統合、推奨エンジンからの検索結果などの機能を追加しています。API を使用すると、独自の UI を使って完全なカスタム ユーザー体験を作成できます。この場合、Video Cloud は動画再生領域のみを管理します。

プレーヤへの DOM アクセス

Video Cloud プレーヤ API は、ハイレベルの機能モデルを通じて新しい機能を提供するだけでなく、テンプレート BEML で指定されたプレーヤのドキュメント オブジェクト モデルにアクセスできます。DOM をトラバースすることにより、開発者はプレーヤ内のレイアウトと UI コントロールを参照することができ、ランタイム時にエクスペリエンスをリライトし、ユーザーに表示される表示を追加、削除または完全に置き換えることができます。

各 Video Cloud UI コンポーネントは、ポジショニングやサイジングといった通常の数多くの表示メソッドや、個別のコントロール独自のメソッドを提供します。リストには様々なデータの入力が可能で、リスト内の項目はデータの様々な側面を表示することができ、ボタン ラベルの変更が可能で、新しい画像をロードすることができます。また、コンテキストに応じた広告またはリブランディングのため、すべての UI 要素をランタイム時にリスタイルすることができます。カスタム UI が含まれている場合、標準の Video Cloud コンポーネントと同様に、プレーヤ API を通じてそれらの UI にアクセスできます。

プラグイン アーキテクチャ

Video Cloud プレーヤの機能拡張のために、大きなシェル アプリケーションを作成して、プレーヤとアプリケーションのインタラクションおよび機能セットの追加のために、プレーヤをコンポーネントとして組み入れる必要はありません。Video Cloud プレーヤ用に顧客やパートナが開発した追加機能プラグイン モデルを利用でき、必要に応じてプレーヤにロードすることができます。ランタイム時にプレーヤにロードされる SWF 内で、Video Cloud プレーヤ AIP に対してプログラムすることで、開発者は、パブリッシャのサイトかバイラル配布かといった配信される環境に関係なく、プレーヤの機能を拡張することができます。これらのプラグイン SWF はテンプレート BEML からすべてのプレーヤについて指定するか、または、Video Cloud Studio Publishing モジュール内のプレーヤ設定により個別のプレーヤ インスタンスに追加することができます。カスタム プレーヤ コンポーネントの作成についてはこちらを、プレーヤ テンプレートへのカスタム コンポーネントの追加についてはこちらを参照してください。

非表示機能に関するモジュール

視覚的コンポーネントのレンダリングを必要としない機能については、Video Cloud プレーヤはプラグイン モジュールのコンセプトを提供しています。例としては、プレーヤ イベントをリスンし、カスタム レポート用にデータをバックエンドに送信し、サードパーティ推奨エンジンを使用してプレーヤ メニューに表示される関連メディアをコントロールし、埋め込み環境に応じて、ユーザーに表示される動画のレンディションを決定する、などがあります。モジュールは、BEML テンプレート内の特殊タグを通じて、テンプレートのすべてのプレーヤ インスタンスに追加するか、または個別のプレーヤ インスタンスに追加することができます。

BEML でのバインディングも、プラグイン モジュールについて完全サポートしていますので、プレーヤ内の他の要素を、プラグインで表示された値にバインドすることができます。同様に、プラグイン SWF で使用できるパブリック メソッドを、BEML バインディングの指定に基づき、プレーヤ内の他のコンポーネントにより呼び出すことができます。このバインディング機能を使うと、Video Cloud プレーヤの他の場所で定義されたボタンをクリックしたときにカスタム プラグイン メソッドを呼び出し、プラグイン メソッドを使ってラベル テキストを変換することができます。

カスタム UI およびスキン設定用 SWFLoader

視覚的コンポーネントのレンダリングが必要な Video Cloud プレーヤ内の追加機能（ユーザーに対してプレイリストを表示するカスタム UI、Twitter やインスタント メッセージなどのサードパーティ技術とのインターフェースを表示するコンポーネントなど）について、BEML 仕様は、開発者がプレーヤの残りのコンテキスト内のどこに SWF をロードし、配置し、サイズを決定するかを定義するための SWFLoader タグを提供しています。SWF は、プレーヤのサイズが変更され、内部コンポーネントのサイズと配置が変わったときに、SWFLoader も変更されるように、プレーヤのリキッド リサイジングの範囲内に含まれるように開発することが可能です。プレーヤ AIP への完全アクセスは、プラグイン モジュール SWF の場合と同様に、SWFLoader SWF に対して許可されます。

タグ
カスタマイズ, スキン, テーマ