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

この背景動画を簡単に実装できる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="http://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で背景に動画をフルスクリーンで流す際に是非。。。

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (5)

  • YH | 2013.03.24 8:52

    はじめまして。毎回、実用的な内容でよく利用させていただいています。
    質問なのですが、こちらループ再生をNGにして最終のシーンで静止させることは可能でしょうか?
    また、再生終了後(もしくは任意のタイミング)に動画自体を画面上から消して、
    通常のブラウザのようにすることは可能でしょうか?

    いきなり二つの質問で申し訳ありませんが、
    お知恵を拝借できますと助かります。
    よろしくお願いします。

  • BlackFlag | 2013.03.25 23:48

    >YHさん

    コメントありがとうございます。

    この背景動画フルスクリーンスクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただいた点についてですが
    動画再生に関する動作はjQuery側から操作するというよりかは
    Flashプレイヤー側でその様にアクションスクリプトを
    組む必要があるように感じております。

    参考までにFlashプレイヤーを最終シーンで静止させるタイプで
    サンプルを用意してみましたので
    必要であれば下記URLよりダウンロードしてみてください。
    http://black-flag.net/devel/jQueryBgFullScreenMovie/jQueryBgFullScreenMovieNoLoop.zip

    お試しください。
    よろしくお願いします。

  • PY | 2014.02.09 23:30

    はじめまして。本ページの通りコーディングした結果、成功しました。本当にありがとうございます。
    質問ですが、スマホやタブレットでも表示できるしたいでのですが、
    >Flash非対応デバイスで表示する画像を調整する場合には
    >9行目で生成しているソース部分を変更します。
    どうソース部分を変更して良いのか、もう少し具体的に教えていただけますでしょうか?

    ※PCのIE・Chrome・FireFox・Safariでは問題なく表示されています。
    ※.htaccessファイルの作り方と設置方法」は、知っていますが、使わなくてもできますか?

    お手数ですが、教えていただけますと幸いです。
    よろしくお願い致します。

  • BlackFlag | 2014.02.11 11:57

    >PYさん
    コメントありがとうございます。
    この背景動画フルスクリーンスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた内容についてですが
    「スマホやタブレットでも表示できるしたい」とは
    スマホやタブレットで背景に動画を敷く、ということでしょうか。

    スマホ&タブレット(iOS)の場合は基本的にFlashが使えないので
    動画を使用する場合はHTML5の<video>タグなどになると思いますが
    iOSの場合は動画(及び音声)の自動再生が禁止事項となっていたりするので、
    PCと同等の動作は厳しいかと思っております。
    (なので、当スクリプトではスマホ&タブレットは静止画に切り替えています)

    もしスマホ&タブレットで動画を背景敷いているWebサイトがありましたら
    参考にさせていただきたいと思っておりますので
    情報をいただけると幸いです。

    よろしくお願いします。

  • PY | 2014.02.13 2:47

    お返答いただき、誠にありがとうございます。嬉しかったです。
    いままでスマホやiPadなどで見えなかったムービーは、
    GIFアニメーションを用いることで対応ができました。
    よろしくお願い致します。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR