BEML

プレーヤのサイズを変更するには、どうすればいいですか。
EDITION: All / CATEGORY: BEML / PRODUCT: Video Cloud
プレーヤのサイズを変更する方法は 2 通りあります。
 

1.) プレーヤ レベルでの変更

Brightcove の標準テンプレートの一覧をここから表示できます。

一部はパブリッシング コードでサイズ変更ができます。サイズ変更ができる場合はこのページの各テンプレートの上に記載されています。

パブリッシング コードには、'width' と 'height' の 2 つのパラメータがあるのがわかります。たとえば JavaScript のパブリッシング コードは以下のようになります。

<param name="width" value="486" />
<param name="height" value="412" />

数字を調整することによって、プレーヤのコントロールを含むプレーヤ全体をサイズ変更できます。Video Player のテンプレートを使用している場合、これらの寸法を定義するときにプレーヤのコントロールを含めて考える必要があります。希望する動画幅に 6 ピクセル、希望する動画の高さに 52 ピクセルを加えます。

たとえば寸法 480x270 の 16:9 動画用にプレーヤのサイズを指定する場合、レバーボックス化を防ぐためにプレーヤ全体を次の寸法にサイズ変更します。

<param name="width" value="486" />
<param name="height" value="322" />

2.) BEML を使用したテンプレート レベルでの変更

テンプレート レベルでプレーヤを変更する最大の利点は、サイズを 1 回設定し、このテンプレートから複数のプレーヤを作成できるという点です。

この方法についての詳細は次のリンクをご覧ください。

プレーヤ テンプレートを開発する

多くのコンポーネント (TileList あるいは TabBar) を含む標準テンプレートで作業する場合、上記 1. では動画プレーヤのサイズ変更ができません。これは、動画プレーヤのサイズが BEML コード内でハードコーディングされているためです。これらのプレーヤにおいて動画プレーヤを簡単にサイズ変更するには、次の手順を行います。

  • Publishing モジュールにクリックで移動します。
  • [すべてのテンプレート] をクリックして現在アカウントにあるテンプレートのリストをロードします。
  • 「Video Player with Dropdown Navigation」のテンプレートを選択します。
  • [複製] ボタンをクリックします。これで新しいテンプレートが作成されます。このテンプレートの名前を「Video Player with Dropdown Navigation copy」に変更します。
  • [編集] ボタンをクリックして Template Manager を開きます。ここで BEML コードを編集することによってテンプレートのデザインを変更します。
次の行が表示されます。

<VideoPlayer id="videoPlayer" height="275" video="{videoList.selectedItem}"/>

動画プレーヤの高さを調節するには、現在「275」に設定されている高さの値を変更します。この値を変更することによって、動画プレーヤのサイズを調整できます。

動画プレーヤの幅を調整するには、高さのパラメータの直後に次を追加します。

width="xxx"

「xxx」はプレーヤの幅です。
プレーヤに長い説明を表示するには、どうすればいいですか。
EDITION: Enterprise, Pro / CATEGORY: BEML / PRODUCT: Video Cloud

今の時点では標準プレーヤ テンプレートは長い説明を表示しません。Pro および Enterprise のお客様は、BEML を使用して、素早く簡単に修正できます。 テンプレートを選択し [編集] をクリックして、BEML エディタ ウィンドウを起動します。標準テンプレートを使用している場合は、最初にテンプレートを「複製」してください。
BEML コードが表示されたら、次のように記載されている行を見つけます。
<Label id="videoDescription" height="48" size="11" text="{videoPlayer.video.shortDescription}" truncate="true" multiline="true"/>
次の部分に注目してください。
text="{videoPlayer.video.shortDescription}"
「shortDescription」を「longDescription」に置換します。すると、プレーヤは、動画の長い説明を取得するようになります。
プレーヤを表示したときに長い説明が途中までしか表示されない場合は、必要に応じて <Label> タグの「height」プロパティと「size」プロパティを調整します。