HTML5の動画再生機能を利用する – MediaElement.jsプラグイン

ブラウザのネイティブ機能によりHTML5動画を再生するのは簡単だが、
・ブラウザの種類によって見た目が異なる
・別のプラグイン(jQuery EasyUI)との相性がよくない
ようなので、プラグインを使ってみる。今回は、MediaElement.js を試した。

• 簡単な使い方

HTML5のvideo要素とJavaScriptで以下のように記述する。(HTMLは通常と同様)

<!-- HTML -->
<video id="videoMEsample" width="400" height="240" controls="controls">
  <source type="video/mp4" src="...">
</video>

// JavaScript
$('#videoMEsample').mediaelementplayer();

これにより、MediaElementのプレーヤー(デフォルト状態)がセットされた状態で表示される。

これはchromeの画面だが、他のブラウザでも(再生可能な動画が指定されていれば)同じ見た目になる。

• オプションを設定する

コードを使ってHTMLのvideo要素にオプション設定する(つまり見た目を制御する)場合は以下の形式を使う。

// JavaScript
$('#videoMEsample').mediaelementplayer({
  // options..
});

再生や停止などの操作もコードで行いたい場合は、プレーヤーを以下のように実体化する。

// プレーヤーの初期化
//playerME = new MediaElementPlayer('#videoME');// デフォルト設定で初期化する場合
playerME = new MediaElementPlayer('#videoME',{
  // initial volume when the player starts
  // 初期時点の音量(反映されない？)
  startVolume: 0.2,
  // the order of controls you want on the control bar(and other plugins below)
  // コントロールバー上の項目の並び順(プログレスバーの表示がおかしい？)
  features: 
   ['playpause','current','duration','tracks','volume','fullscreen','progress'],
  // Hide controls when playing and mouse is not over the video
  // コントロールを常時表示するかどうか
  alwaysShowControls: true,
  // 時間を常時表示するかどうか
  // forces the hour marker (##:00:00)
  alwaysShowHours: true,
  // show framecount in timecode (##:00:00:00)
  showTimecodeFrameCount: false
});

• 再生・停止する

playerME.play(); // 再生する場合
playerME.pause(); // (一時)停止する場合

HTML5は仕様上、停止(stop)を定義していないので、停止したい場合はpause()を使う。