VIDEは背景動画をすぐに実装できるjQueryプラグインです。
背景に動画を使ったサイトが増えてきましたね。VIDEを使えば、本当にサクッと実装できちゃいます。
動画ファイルの拡張子は、mp4、ogv、webmに対応していて、一つのフォルダに拡張子の前のファイル名を同じにして入れておけば、環境に合わせて勝手に読み込んでくれます。現在は、主要ブラウザがmp4に対応しているので、mp4だけでも大丈夫だと思います。また、同じファイル名でjpgファイルを入れておくと、動画の読み込み時や動画が再生できない場合に背景画像として表示してくれます。
デモ
デモページを用意しました。
ダウンロード
サイトの「Downlod」ボタンからダウンロードします。
基本的な使い方
jQueryとjquery.vide.jsを読み込みます。jquery.vide.jsはダウンロードしてきたファイルの「src」フォルダに入っています。jQueryはバージョン1.11.2を使いました（※2016/1/21時点）。ダウンロードしてきたファイルの「libs」フォルダに入っている「jquery-loader.js」を開くと、必要なjQueryのバージョンが分かります。
<script src="js/jquery.min.js"></script> <script src="js/jquery.vide.js"></script>
htmlはこんな感じです。bodyタグの中は自由に記述できます。
<body> </body>
基本的なスクリプトを実行します。「js/vide/ocean」の部分は、動画ファイルまでの相対パスになります。注意点としては、拡張子を除いたファイル名までを記述する必要があります。例えば、動画ファイルが「js/vide/ocean.mp4」の場合、「js/vide/ocean」となります。同じフォルダに「ocean.webm」や「ocean.ogv」形式の動画も入れておけば、環境に合わせて読み込んでくれます。また、「ocean.jpg」という形で画像ファイルを入れておくと、動画の読み込み時や動画が再生できない時に背景画像として表示してくれます。
<script>
$(function(){
$('body').vide('js/vide/ocean');
});
</script>
これで背景に動画が流れます。
オプション
オプションを指定する場合は、こんな感じになります。下記のオプションは全てデフォルト値になっています。
$(function(){
$('body').vide('js/vide/ocean', {
volume: 1,
playbackRate: 1,
muted: true,
loop: true,
autoplay: true,
position: '50% 50%', // Similar to the CSS `background-position` property.
posterType: 'detect', // Poster image type. "detect" — auto-detection; "none" — no poster; "jpg", "png", "gif",... - extensions.
resizing: true, // Auto-resizing, read: https://github.com/VodkaBears/Vide#resizing
bgColor: 'transparent', // Allow custom background-color for Vide div,
className: '' // Add custom CSS class to Vide div
});
});
各拡張子の動画ファイルへのパスを個別に指定することもできます。「poster」は「autoplay」をfalseにした時に最初に表示される画像ファイルへのパスです。
$(function(){
$('body').vide({
mp4: 'js/vide/ocean1',
webm: 'js/vide/ocean2',
ogv: 'js/vide/ocean3',
poster: 'js/vide/poster'
},{
...options...
});
});
トラブルシューティング
サーバー環境によってはMIMEタイプが設定されておらず、mp4やwebm、ogvを動画として再生できないことがあります。
そんな場合は、.htaccessに下記を記述してみましょう。もしくは、サーバーのhttpd.confの設定でも解決できます。
AddType video/mp4 .mp4 AddType video/webm .webm AddType video/ogg .ogv