jQueryで背景に動画をフルスクリーンで表示する方法

2012/07/18 TAGS :jQuery, フルスクリーン

海外のサイトなどで最近たまに見かける、背景に動画をフルスクリーン表示して見せる手法。
背景全面に動画が流れることでページの演出をかなりダイナミックに見せることが出来ます。

この背景動画を簡単に実装できるjQueryプラグインもありますが
YouTubeにアップされている動画が対象だったりで、
任意の動画ファイルを簡単に流すことができるものが見当たらなかったので
簡単に実験的に作ってみたのを紹介してみます。

jQueryで背景に動画をフルスクリーンで表示する方法

動画を流す手法はHTML5の＜video＞タグとかも考えましたが
今回は動画再生はFlashで流すパターンにしています。

まずは動作のサンプルから。
下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます）

jQueryで背景に動画をフルスクリーンで表示するサンプルを別枠で表示
※サンプルでの動画ファイルは容量を軽減する為に少々粗いものになっています。

ブラウザ枠をリサイズしても
背景動画も比率を合わせながらリサイズしています。

この動作の全体構成について
まずはHTMLから。

◆HTML
<div id="container">

<div id="contents">
<div id="wrapper">
<h1>jQuery BackGround FullScreen Movie</h1>

<p>ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。ここはコンテンツエリア。</p>

<p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p>

<p>これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。これはダミーテキストです。</p>

<h2>COPYRIGHT &copy; <a href="https://black-flag.net/">BLACKFLAG.NET</a> ALL RIGHTS RESERVED.</h2>
</div><!--/#wrapper-->
</div><!--/#contents-->

</div><!--/#container-->

実際に動画を流す部分のタグはJS側で生成するので
HTMLにはページ上に表示するコンテンツ要素の内容を記述しておきます。

コンテンツ要には必ず全体を囲うブロック要素が必要になります。
（サンプルでは「#contents」）

これに対してのCSSは以下。

◆CSS
#container {
	width: 100%;
	text-align: center;
}


/* #bgview
--------------------------- */
#bgview {
	top: 0;
	left: 0;
	position: fixed;
	z-index: 1;
}
*html #bgview {position: absolute;}

#bgview img {
	width: 100%;
}

/* #contents
--------------------------- */
#contents {
	margin: 50px auto;
	width: 800px;
	color: #fff;
	text-align: left;
	position: relative;
	z-index: 2;
}

#contents #overlaybg {
	width: 100%;
	background: #333;
	position: absolute;
}

#contents #wrapper {
	width: 100%;
	text-align: left;
	position: relative;
}

#contents p {
	padding: 0 15px 30px 15px;
	position: relative;
}

「#bgview」のIDで書かれているところが
動画を表示するブロック要素の内容になっています。

コンテンツ要素全体を囲うブロック要素「#contents」には
「position: relative;」を必ず入れておく必要があります。

そして実際に背景に動画を表示するスクリプトは以下の様になります。
※今回のサンプルでは動画の画角は「16:9」になっています。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/swfobject.js"></script>
<script>
$(function(){
	$('body').prepend('<div id="bgview"></div>');

	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
		$('#bgview').css({width:'100%'}).prepend('<img src="img/bgview.jpg">');
	} else {
		// 動画再生SWFプレイヤー読み込み
		var flashvars = {};
		flashvars.movieURL = "movie.flv"; // SWFプレイヤーの格納場所からみたFLVファイルへのパス
		var params = {};
		params.wmode = "transparent";
		params.quality = "high";
		params.loop = "true";
		// 動画再生SWFプレイヤー読み込み 動画の画角が4:3の場合は「swf/player4_3.swf」
		swfobject.embedSWF("swf/player16_9.swf", "bgview", "100%", "100%", "9.0.0", "movie/expressInstall.swf", flashvars, params);

		var movieRatio = 16/9; // 動画の画角が4:3の場合はここを「4/3」に

		function movieAdjust(){
			var adjustWidth = $(window).width();
			var adjustHeight = $(window).height();
			if (adjustHeight > adjustWidth / movieRatio) {
				adjustWidth = adjustHeight * movieRatio;
			}
			$('#bgview').css({width:(adjustWidth),height:(adjustWidth/movieRatio)});
		}
		$(window).resize(function(){movieAdjust();});
		$(window).load(function(){movieAdjust();});
		movieAdjust();

		var contentsHeight = $('#contents').height();
		$('#contents').prepend('<div id="overlaybg"></div>');
		$('#overlaybg').css({height:(contentsHeight),opacity:'0.4'});
	}
});
</script>

jQueryライブラリファイル「jquery.js」の他に
Flash貼り付け用のJS「swfobject.js」も併せて使用します。

スクリプト5行目に書かれている「$(‘body’).prepend(‘＜div id=”bgview”＞＜/div＞’);」で
動画を流す部分のブロック要素IDを生成しています。

7行目辺りでFlash非対応であるiPhoneやiPad（ついでにAndroidも）には
別途、静止画を表示するように振り分けをしてあります。
Flash非対応デバイスで表示する画像を調整する場合には
9行目で生成しているソース部分を変更します。

動画再生するFlashプレイヤー（SWF）は今回のサンプルでは
単純にFLVファイルをループ再生させる仕様にしてあります。
再生させるFLVファイルはスクリプト内から指定します。（13行目）

再生させる動画については、動画の画角「16:9」と「4:3」で、
それぞれで計算方法と使用するFlashプレイヤー（SWF）が変わってくるので
19行目と21行目の内容を再生させる動画の画角によって変更する必要があります。

ブラウザ枠と動画再生枠をフルスクリーンにする計算方法は
jQueryプラグイン「jQuery tubular」を参考にさせていただきました。

動画を背景に敷く際には、重さの負荷など
いろいろと構成に気をつけなくてはいけないところもありますが
凝った映像などを流すことでとてもかっこいい演出を簡単に組み込むことが可能になるかと思っています。

jQueryで背景に動画をフルスクリーンで流す際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから