[JS]数行のコードで、動画をウェブページの背景いっぱいに配置するスクリプト -BigVideo.js

MP4などの動画をウェブページの背景として配置するjQueryのプラグインを紹介します。

BigVideo.js
※背景の魚群は動画です。

• BigVideo.jsのデモ
• BigVideo.jsの使い方

BigVideo.jsのデモ

デモの動画はMP4を使用しており、Chrome, Safari, IE9などでご覧ください。
※動画のフォーマットは下記で詳しく。

デモページ

デモは左のメニューから、動画を変更して再生できます。

BigVideo.jsの使い方

外部ファイル

BigVideo.jsはjQuery, jQuery UIと、動画再生に「video.js」を利用しています。これら全てを外部ファイルとして記述します。

<!-- BigVideo Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script src="js/jquery.imagesloaded.min.js"></script>
<script src="http://vjs.zencdn.net/c/video.js"></script>

<!-- BigVideo -->
<script src="bigvideo.js"></script>

JavaScript

まずはシンプルに、一つの動画を背景にするスクリプトです。

<script>
$(function() {
	var BV = new $.BigVideo();
	BV.init();
	BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});
</script>

デモページ：一つの動画

複数の動画をループ再生することもできます。

<script>
$(function() {
	var BV = new $.BigVideo();
	BV.init();
	BV.show(['vid1.mp4','vid2.mp4','vid3.mp4'],{ambient:true});
});
</script>

デモページ：複数の動画ループ

動画のフォーマット

利用できる動画のフォーマットは「video.js」に依存しています。

• Ogg Theora
• MP4
• WebM

それぞれの対応ブラウザなど、詳しくは下記ページを参考ください。

• video.jsの互換性

動画ファイルの使用にはVimeoを勧めています。
Vimeo Proに登録すると、動画のMP4ファイルにダイレクトにリンクできます。Vimeoは単に帯域が広いだけでなく、動画の圧縮技術も素晴らしい、とのことです。