Multimedia View

マルチビューウィジェットは、マルチメディアコンテンツの表示および処理するために使用できるプレーヤーコントロールを表示します。このウィジェットは標準HTMLのvideo、audio要素を使用しています。

アプリケーションにマルチメディアビューウィジェットを追加するには、次のコードを使用します。

// Video player control
<video data-controls="true" style="width:100%;" data-theme="c">
   <source src="<VIDEO_FILE_URL>" type="video/mp4" />
   Your browser does not support the video tag.
</video>

// Audio player control
<audio data-controls="true" style="width:100%;">
   <source src="<AUDIO_FILE_URL>" type="audio/mp3" />
   Your browser does not support the audio tag.
</audio>

マルチメディアビューウィジェットのオプションについて次の表で説明します。

オプション	入力タイプ	説明
data-control	真偽値	ウィジェットのコントロールを設定します。デフォルト値はtrueです。値がtrueに設定されている場合は、ウィジェット自身のプレーヤコントロールを使用します。値がfalseに設定されている場合は、ウィジェットはブラウザのプレーヤーコントロールを使用します。
data-full-screen	真偽値	`fullscreen`ビューモードでウィジェットを開くかどうかを設定します。デフォルトの値は`false`です。
data-theme(optional)	文字列	ウィジェットのテーマを設定します。値が設定されていない場合は、親コントロールのテーマを使用します。

マルチビューは、ウィジェットが作成されたときに起動するcreateイベントにコールバックを設定することができます。

$('.selector').multimediaview({
   create: function(event, u){...}
});

$(".selector").bind("create", function(event, ui)
{
   // Respond to the multimedia view widget creation
});

次のリストでマルチメディアビューが使用できるメソッドについて説明します。

width

マルチメディアビューの幅の取得(値が設定されていない場合)と設定にwidthメソッドが使えます。

  <video data-full-screen="true">
     <source src="test.mp4" type="video/mp4" />
  </video>

  $(".selector").multimediaview("width", [value]);

height

マルチメディアビューの高さの取得(値が設定されていない場合)と設定にheightメソッドが使えます。

  <video data-full-screen="true">
     <source src="test.mp4" type="video/mp4" />
  </video>

  $(".selector").multimediaview("height", [value]);

fullscreen

マルチメディアビューのfullscreenモードの取得(値が設定されていない場合)と設定にfullscreenメソッドが使えます。値がtrueの場合はfullscreenモードが有効になり、そうでなければnormalモードになります。
```
  <video data-full-screen="true">
     <source src="test.mp4" type="video/mp4" />
  </video>

  $(".selector").multimediaview("fullScreen", [value]);
```