ブログ / BRIGHTCOVE NEWS

プレイヤーの関連動画をカスタマイズする

Brightcove News 11/30/2011

(すべてのエディションでご利用頂けます)

Video Cloud のプレイヤーには、関連動画機能が標準で付いています。標準そのままの機能で使うと、[関連動画] [新着動画] [人気動画] の 3 種類が表示されます。

他のプラットフォームのプレイヤーでは関連動画に表示する動画の制御が行えないなどの制約があることもありますが、Video Cloud のプレイヤーでは表示される動画の制御を自由に行うことが可能です。

例えば、Video Cloud 管理画面上で「オススメ動画」のタグが付いているものを表示したり、外部のシステムと連携し、ユーザーが購入している動画一覧を「購入済の動画」という項目で出すといったことも可能です。例えば、以下のスクリーンショットのように見せることも可能です。

.jpg)

関連動画をカスタマイズしたい場合、Player API を利用し Menu モジュール setAdditionalMediaCallback() を呼び出します。この関数の中で、関連動画に表示する項目名と、その項目が選ばれたときに呼び出すコールバック関数を渡します。

menuModule.setAdditionalMediaCallback(callbackFunc, ["オススメ動画", "新着DVD"]) //第1引数には、関連動画に表示する内容を決めるコールバック関数を指定します。この関数は関連動画が表示された際に呼び出され、この関数の中でどの動画を表示させるかを決めるロジックを記述します //第2引数の配列には、関連動画に表示する項目名を配列で設定します。この例では、関連動画に「オススメ動画」と「購入済の動画」の2つが表示されます。

.jpg)
図1: setAdditionalMediaCallback() を利用し、項目名を "オススメ動画" などに変更している

次に、上の setAdditionalMediaCallback() で指定したコールバック関数を記述します。この関数の中で、どの動画を表示させるかを決めます。

function callbackFunc(type, media){ //typeには、「オススメ動画」と「購入済の動画」など、どの項目が関連動画上で選択されているかが入ります(上のsetAdditionalMediaCallback()の第2引数で指定した値のいずれかが渡されます) //mediaには、現在プレイヤーで表示している動画のMediaDTOが格納されます

if(type=="オススメ動画"){ //オススメ動画が選択されたので、オススメ動画を取得してくる。例えば、管理画面上で「オススメ動画」のタグが付いている動画を表示したい場合、Contentモジュールでタグ検索を行ってMediaDTOを取得し、それを配列の形でmediaDtoAryに格納します。 //また、タグ検索だけでなく、外部の mediaDtoAry = {タグ検索で取得したMediaDTOの配列}

//MediaDTOの配列が準備できたら、setAdditionalMediaForType()で、オススメ動画の箇所に動画を表示します menuModule.setAdditionalMediaForType(mediaDtoAry, ”オススメ動画”); return true; }else if (type==”購入済の動画”){ //新着DVDの項目についても上と同様な処理を行う

menuModule.setAdditionalMediaForType(mediaDtoAry, ”購入済の動画”); return true; } }

.jpg)
図2: コールバック関数が正しく処理されると、コールバック関数内で指定した動画が並ぶようになる

これら関連動画カスタマイズの詳細については、『プレーヤ メニューの追加メディアをカスタマイズする』に詳細な記述がありますのでご参照下さい。

0