映像クリエイター必見、簡単に動画をWEBページのbackgroundにする方法【BigVideo.js】

2014/02/25 U-YA コメントコメント2件

昨今のウェブ業界では2014年は動画が来ると言われています。（誰が言ったかは忘れたけど有名な人が何人か言ってた気がする・・・。）

海外のオシャレなウェブサイトや海外のシリコンバレー辺りのITベンチャーのウェブサイトも挙ってウェブページに動画を使い始めています。

まずはCreativeBloqの記事で紹介されているこちらの記事。
15 superb websites with video backgrounds

動画が背景の素晴らしいウェブサイト15選

最近Google Driveとの連携で有名なUberConferenceのトップページ。

日本でも先日ご紹介した動画専門アウトソーシングのViibar等。

映像バックグラウンドの波が来てます。

「けれどお難しいんでしょう？」と思っているアナタに朗報。

とても簡単に動画を背景に設定できちゃうjQueryプラグインをご紹介。

BigVideo.js

リンク先に飛んでいただければわかりますが、ブラウザ内全面に背景動画が広がっております。

ビデオファイルは音声を同時に再生することも可能ですが、ブラウザ開いたら音楽が鳴るのを嫌がる人は結構多いのであまりオススメしません。

jQueryを少し弄れば動画の再生停止ボタンも作成可能。

設定方法は以下の通り。

設定方法

今回は音声無しの設定方法を中心に行いたいと思います。

まずはWEBページにjQueryを読み込みます。

開発者ページでは2.0.3が読み込まれているようです。

私が確認したときのバージョンで1.9.Xあたりまでは動作しました。（細かいチェックまではしていません。）

基本的なjQueryの設定方法は割愛させていただきます。

jQueryの設定ができたら先ほどのBIGVIDEO.JSのホームページへ。

http://dfcb.github.io/BigVideo.js/

ページ上部のDownloadからZipファイルを落とします。

解凍ファイル内部にあるbigvideo.jsファイルを読み込ませます。（jQueryを読み込んだ後）

そして解凍ファイル内部のCSSも読み込みます。（EXAMPLEには何故かCSSファイルが入ってません、ZIPを落としてください。）

つぎにページヘッダーの中に以下のコードを読み込みます。

$(function() {
    var BV = new $.BigVideo();
    BV.init();
    BV.show('保存フォルダまでの絶対パス/再生したい動画.mp4',{ambient:true});
});

※音声も再生したい場合は,{ambient:true}無し、ループ再生させたい場合には,{doLoop:true}を挿入。

連続して幾つかのファイルを再生したい場合は動画を配列にして以下のように並べます。

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

階層を使いたい場合は念のためjsやcssと同じ階層にvidsというフォルダを作って再生したいファイルを入れてください。

再生と停止は以下のjQueryのスクリプトをボタンやチェックボックスにて実行してください。

BV.getPlayer().pause();

基本はこれでOKです。

既存のページに適用させる場合にはCSS内部を弄ると細かい部分の変更が可能です。

開発者ツールなどを使ってどの部分が何処に対応しているのかを調べながら微調整してください。

使用例はこちら。

http://internationalinsights.net/

元々画像スライド背景で全てのボックスに透過設定してあったので導入は楽でした。

※なぜかIE11では動かない、ローカルではIEでも動くのでサーバーサイドの問題かなぁと思って諦めました。

注意すること

いくら動画を使ってカッコイイからと言ってもSEOの観点から見て読み込み速度は速いに越したことはありません。

{ambient:true}で音声を再生しない場合もファイルは読み込まれているので、無音にしたい場合はエンコードや編集ソフトを使って最初から無音で書き出すといいでしょう。

オススメのフリーソフトはMacならいわずと知れたMPEG StreamClip、WinならばHandBrakeあたりが良いと思います。

ひとこと

ちなみに先ほどの15選の中でも01.mediaBOOMで同一プラグインが使用されています。

その他はFlashだったりHTML5で直接動画を読み込んでいたり。

以下がFlashでした
02. MyProvence Festival
04. Life of Pi
08. Matter
09. Eagleclean
10. Dromoland Castle
14. Arcade Fire

12と13は確認時既にデザインが変わっているようで動画は使っていませんでした。

15はリンク切れかサーバー落ちで接続できませんでした。

こうやって見るとFlashもまだまだ現役ですね、もうちょっとFlashスキルも磨こう・・・。

ここに全部リンク貼るのは申し訳ないのでキニナル方は15 superb websites with video backgroundsへどうぞ。

というか久々にちゃんとウェブ屋っぽい記事書いた・・・。