動画を全画面表示するjQueryプラグインBigVideo.js

BigVideo.jsというjQueryプラグインを使って、動画を全画面表示する方法です。
webmやoggなど複数のファイル形式の動画を用意しなくても、mp4ひとつでブラウザ毎に最適化して表示してくれる素敵なプラグインです。

今回は3つのパターンのサンプルを用意してみました。

前提として、IE8以下とタッチデバイスには対応していないようなので、これらは静止画を表示するようにしています。
IEで動画が連続再生されない時の対処方はこちら

※IE6～10はエミュレータで検証しているので、IEの動きが実機ではどうなるか定かではありません。もしIE6～8でも正しく表示されるようでしたらCSSで非表示にするなどの設定は不要です。
※iOSやAndroidは、動画を再生する際に画面遷移したりと、挙動にバラつきがあるので、静止画を表示する前提でやっておいた方が良さそうです

1 基本的な設定
2 1つの動画をループ再生する
3 3つの動画を連続してループ再生する
4 3つの動画をランダムにループ再生する
5 IEで動画が連続再生されない時の対処方

基本的な設定

以下のファイルを読み込みます。modernizr-2.5.3.min.jsはタッチデバイスでの挙動を指定しない場合は読み込まなくてOKです。

必要なファイルを読み込む

配布元サイト

<link rel="stylesheet" href="bigvideo.css" />
<script src="modernizr-2.5.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="video.js"></script>
<script src="bigvideo.js"></script>

htmlの記述

動画用の記述はプラグイン側が自動生成するので、特に必要ありません。
その他に表示したい要素を記述します。

<div id="content">
  <p>動画の上に重ねたい要素など</p>
</div>

CSSを設定する

bodyにIE6～8だった場合に表示する背景画像を指定しておきます。
また、IE6～8だった場合は動画のエラーメッセージが表示されてしまったので、これが見えなくなるようにCSSハックを用いて動画を非表示にしています。
なぜかIE8のハックを行うと9にも効いてしまったので、IE9では表示するように設定しています。

動画は、プラグイン側から生成される#big-video-wrapというdivの中に表示されるので、そのブロックに対してz-indexでレイヤーの順番を指定しておきます。
指定しないと、Macのsafariでは動画の上に要素を重ねる場合に要素が動画の下へ埋もれてしまいました。

#big-video-wrapに文字色を指定しているのは、動画が切り替わる時にメッセージのようなものが一瞬表示されるので、それを目立たなくするためにテキストを背景色と同じ色にしているためです。
そもそもこのメッセージが表示されないように出来るといいのですが。。

body {
    padding: 0;
  margin: 0;
  font-size: 14px;
  background: url(bg-image.jpg) repeat left top;/* IE6～8用の背景画像 */
}
#big-video-wrap {
  color: #b9f8ff;/* 動画のメッセージを目立たなくする */
  z-index: 1;
  /display: none;/* IE6 7では動画非表示 */
}
/*IE8では動画非表示*/
html>/**/body #big-video-wrap {
  display/*\**/: none\9;
}
/*IE9では動画表示*/
body:not(:target) #big-video-wrap{
  display: block;
}
#content {
  position: fixed;
  left:20px;
  top: 20px;
  width: 85%;
  z-index: 100;
  background: rgba(255,255,255,.5);
  padding: 10px;
}

1つの動画をループ再生する

$(function() {
  var BV = new $.BigVideo();
  BV.init();
  if (Modernizr.touch) {
    BV.show('bg-image.jpg');//タッチデバイスでの画像を指定
  } else {
    BV.show('bubble.mp4',{ambient:true});
  }
});

1つの動画をループ再生

3つの動画を連続してループ再生する

$(function() {
  var BV = new $.BigVideo();
  BV.init();
  if (Modernizr.touch) {
    BV.show('bg-image.jpg');//タッチデバイスでの画像を指定
  } else {
    BV.showPlaylist(['pink.mp4','bubble.mp4','star.mp4'],{ambient:true});
  }
});

3つの動画を連続してループ再生

3つの動画をランダムにループ再生する

$(function() {
    var BV = new $.BigVideo();
    var vids = [
    'pink.mp4',
    'bubble.mp4',
    'star.mp4'
  ];
  BV.init();
  if (Modernizr.touch) {
    BV.show('bg-image.jpg');//タッチデバイスでの画像を指定
  } else {
    vids.sort(function() { return 0.5 - Math.random() }); // ランダム
    BV.showPlaylist(vids,{ambient:true});
  }
});

3つの動画をランダムにループ再生

IEで動画が連続再生されない時の対処方

私の環境では、IE9↑で動画が一度再生された後にエラーになってしまい、ループにならない事象が起こりました。
これは、動画をWindowsのムービーメーカーでYouTube用のmp4に保存し直すことで解決しました。
動画に疎いので何が変わったのかよく分かってないのですが、もしも同じようにお悩みの方がいましたらご参考までに。