HTML5のvideoタグを使って背景に動画を設定するjQueryプラグイン・videoBG

HTML5から使えるvideoタグで背景への動画設定を簡単に行えるというスクリプトです。対応していないブラウザには静画が表示されるようになっているみたい。

動画を背景に、というスクリプト。

videoBG

動画のパスを指定して表示するみたいです。楽でいいかも。尚、HTML5未対応のブラウザには普通の画像を別途用意して指定しておくことで表示を切り替えるみたいです。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>

コアとプラグインを読み込み。

$('.foo').videoBG({
		position:"fixed",
		zIndex:0,
		mp4:'bar.mp4',
		ogv:'bar.ogv',
		webm:'bar.webm',
		poster:'bar.jpg',
		opacity:1
	});

背景にしたい場所をセレクタに指定して動画や画像のパスを指定します。

ただし、多用するとパフォーマンスに影響が出るので気をつけてねとの事。当たり前ですが注意したいですね。ご利用は以下よりどうぞ。

videoBG