Bigvideoプラグインを使用してvideo要素で動画をブラウザの背景全体に再生させる（レスポンシブ対応）【jQuery連載02】

前回は、jQueryの「tubular」プラグインを使用してYOUTUBEにアップロードした動画を背景に表示させるサンプルを作成しました。（前回の記事はこちら）

今回は、jQueryの「Bigvideo」プラグインを使用して作成しました。

YOUTUBEなどの外部サイトの動画でなく自分のサーバーにある動画を背景に流したい場合におすすめのサンプルです。

前回同様に背景に動画だけを作るだけなく、ロゴやナビゲーションやコンテンツ内容を入れてWebサイトのTOPページのデザインのようなサンプルを作成してみました。

今回作成したサンプル

サンプルをみる

HTML5 Video要素で扱える動画ファイルに気をつけよう

HTML5 Video要素で扱える動画はブラウザごとに対応形式が異なるため注意が必要です（2013年12月現在）。

今回は主要ブラウザがサポートしている「mp4」「ogg（ogv）」「webm」の3つの形式の動画を用意しました。これらは通常の動画ファイルを作成してから変換ツールで簡単に変換が可能です。

以前ブログに初歩的ですがvideo要素の記事を書いたのでこちらもご覧ください。

絶対に覚えておきたいHTML5の『video要素』超基本を知る!!
http://www.html5-memo.com/video/basic01/

jQueryプラグイン「Bigvideo」で動画を背景に設定する流れ

bigvideoプラグインで実装した全画面背景動画のサンプル。見た目はtubularプラグインと変わらないように作成しました。

bigvideoプラグインは、JavascriptでHTML5 videoを扱いやすくするvideoプラグインの機能に依存しているため、「video.js」（http://www.videojs.com/）を事前に読みこむ必要があります。また関連するCSSも読み込んでおきましょう（bigvideo.css）。

Javascriptでは、まずbigvideoプラグインが動画を扱うためにBigVideo()関数を呼び出して、bigvideoプラグイン用のオブジェクト（$BV）を生成します。

関数を呼び出す際に引数として、いくつかのオプションを指定できます。

オプションの中で「useFlashForFirefox」は、FirefoxはH.264コーデックのmp4形式の動画に対応していないため、mp4形式の動画しか用意していない場合はtrueにする必要がありますが、今回ogg（ogv）、webm形式の動画も用意しているので、falseに設定します。

bigvideoオブジェクト（$BV）を初期化後、オブジェクトが持つshow()関数に適宜引数を渡して呼び出す事で背景全体に動画が表示されるようにります。

また「tubular」プラグイン同様にブラウザウィンドウサイズが大きな場合に動画が荒れてしまうので網掛けの画像を動画の前面に配置しました。

※JSのコードは下の方に載せてあります。

bigvideoプラグインのスマートフォンなどのモバイル端末の対応を考える

bigvideoプラグインは、スマートフォン、タブレットでは、AndroidのFirefox以外は正常に動作しないため、代替処理として背景動画と同じ動画をHTML5 Videoで設置します。

UA（ユーザーエージェント）判別用の関数_uaで、モバイルであること、さらにAndroid Firefoxではないことが判別したら、HTML5 video要素をコンテンツ内（#contentContainerInner）に生成します。

さらにAndroidはそのままでは動画を再生できないため、動画をクリック（タップ）したら動画が再生されるイベントを付与します。

サンプルで作成したscript_bigvideo.jsのコード

長いですがサンプルコードになります。

(function( d, $){
  
  // 変数の設定
  var param = {
    overlayContainer: 'bgOverlayContainer',
    overlaySelector: 'overlayPattern',
    mobileMoviePrependTo: '#wrapper',
    movie: 'movie/tilt_shift',
    extension : ['.mp4','.ogg','.webm','.png']
  };
  
  // 閲覧環境判別関数
  var _ua = (function(){
    var ua = navigator.userAgent;
    return {
      Mobile: typeof window.orientation != "undefined",
	  	Firefox: window.sidebar,
      Android: ua.search(/Android/) != -1 && ua.search(/Mobile/ != -1)
    };
  })();
  
  // 初期設定
  var init = function() {
    
    // 設定に必要な変数の初期設定
    var $BV, $vcm,
    _bv = {
      movie : param.movie,
      suffix : '',
      extension : param.extension,
      source : function(_t){
        _t = _t || 0;
        return _bv.movie + _bv.suffix + _bv.extension[_t]; },
      isPlaying : false
    };
    
    // 全画面背景動画が正常に動作しない環境のときの代替処理
    if (_ua.Mobile) {
      $('body').addClass('mobile');
      
      // Android版Firefox以外は代替処理
      if(!_ua.Firefox) {
      setTimeout(function(){ scrollTo(0,1); }, 100);

      $vcm = $('<video id="videoContainer_mobile" src="'+_bv.source(0)+'" poster="'+_bv.source(3)+'" controls>').prependTo(param.mobileMoviePrependTo);
      
      if(_ua.Android) {
        $vcm.on('click', function(){
          $(this).width('100%').height('auto');
          this.play();
          _bv.isPlaying = true;
        });
      }

      $(window).on('load resize orientationchange', function()
        {
          changeMovieSize($vcm);
        });
    }
  } else {

    // 動画アミ掛け用のレイヤーを用意する
    var _ovc = $('<div id="' + param.overlayContainer + '">').appendTo($('body'));
    _ovc.addClass(param.overlaySelector);

    // bigvideoプラグインの機能で全画面背景動画を再生
    $BV = new $.BigVideo({
      useFlashForFirefox: false,
      forceAutoplay: false,
      controls: false,
      doLoop: true,
      container: $('body')
    });
    $BV.init();
    $BV.show(_bv.source(), {
      altSource: _bv.source(1),
      ambient: true
      });
    }
    
    // ウィンドウリサイズ時の動画リサイズ処理
    function changeMovieSize($vcm){
      var _w = window;
      var _ww = _w.innerWidth, _wh = _w.innerHeight, _wo = Math.abs(_w.orientation);
      var _adj = _ua.Android_mobile ? -0.1 : 0;
      if(_wo === 90) {
        $vcm.width(_ww);
        $vcm.height(_wh * (0.9 + _adj));
      } else {
        $vcm.width(_ww);
        $vcm.height(_wh * 0.45);
      }
      if(_ua.Android && _bv.isPlaying){
         setTimeout(function(){
          $vcm.width('100%').height('auto');
          $vcm.play();
        }, 1000);
      }
    }
  };

  init();

})( document, jQuery);

サンプルしたサンプルはこちら

今回は以上になります。

2回に分けて動画ファイルをブラウザの背景に全面表示させるサンプルを作成してみました。YOUTUBEやサーバー内に動画など用途にあわせてお試しください。
※これらテスト作成する際はローカルでは動画は表示せずサーバーにアップしないと表示させません。

次回は静止画をブラウザの背景に表示させるサンプルを一枚やランダムに表示させたりするサンプルを紹介します。