BEMLでプレイヤーのレイアウトをカスタマイズする 【BEML入門編】

動画プレイヤーを制作する際、以下のようなデザインの調整が頻繁に発生することがあります。
「プレイリストを右に表示したい、いや下に表示した方がいい、リストの横幅を10px小さくしたい、etc」

他の動画プレイヤーの場合、表示位置の変更や微調整の度に、FlashでSWFをコンパイルしてアップロードして確認、といった作業が発生することも少なくありません。

ブライトコーブVideo Cloudには、BEMLと呼ばれる機能があります。これは、プレイヤーのコンポーネント(動画描画領域やプレイリストやタブなど、プレイヤーの各部品)を並べる位置やサイズなどのレイアウト情報をXMLで指定できる機能です(MXMLやXULをご存じであれば、それらをイメージして頂けるとわかりやすいと思います)。

レイアウト情報をBEML形式で持っておくことで、以下のようなメリットがあります。

  • レイアウト変更の度にFlashでSWFを作る必要がないため、手間を省ける。プレイヤー作成時の頻繁なレイアウト変更にも柔軟に対応できる
  • BEML でレイアウトを組むと、iPad/iPhone向けのHTML5向け配信の際も、ほぼ同じレイアウトが再現される(Video Cloudのスマートプレイヤー機能)。つまり、BEMLのレイアウトはFlash環境とHTML5環境の両方に自動的に対応するため、それぞれについてプレイヤーを作り込む作業が発生しない
  • レイアウトを変更した際も、プレイヤーの埋め込みコードを変更することなく反映される。

特に、iPhone/iPad向けの動画配信が一般的になってきた昨今では、Flash環境とiPad/iPhone環境(HTML5)の両方に自動的に対応できるという部分は大きなメリットといえます。
これに加え、Analyticsモジュールによる高度な視聴解析も両方の環境に自動対応するため、動画の効果測定も両方の環境で行う事ができます。

では、BEMLでのレイアウトはどのように行うのでしょうか。
基本的な考え方としては、用意されているコンポーネント(プレイヤーの部品)を配置していく形になります。例えば、以下の2つのスクリーンショットは、2種類の標準プレイヤーテンプレートを比べたものです。違いは以下のような点です。

  • タブでのプレイリスト選択機能を付けるか付けないか
  • 動画プレイヤーは枠付きにするか、枠無し(Chromeless)にするか
  • 動画のリストは横に出すか、下に出すか
  • 動画名や関連リンクを表示するかしないか

これら2つのプレイヤーは、見た目が大きく異なりますが、BEMLを使って何をどこに配置するかが記述されています。従って、Flash環境でもHTML5環境でも同じレイアウトが再現され、また、高度な解析も利用できます。

このように、BEMLを利用することで、プレイヤーのレイアウトをFlash無しに組むことができ、またFlash環境とHTML5環境の両方で同じレイアウトと機能を持ったプレイヤーを利用できるというメリットが享受できます。

次回は、BEMLのコードなどを紹介する予定です。