【jQuery】動画を背景にするには？

サイト構築に使えそうなjQueryプラグインを見つかりましたので、紹介いたします。

動画を背景にして、サイトの見栄えをよくするものです。

デモを見てください。

プラグインはここからダウンロードできます。

よいところ

・簡単に使える

JavaScript

$(document).ready(function() { $('body').videoBG({ position:"fixed", zIndex:0, mp4:'assets/christmas_snow.mp4', ogv:'assets/christmas_snow.ogv', webm:'assets/christmas_snow.webm', poster:'assets/christmas_snow.jpg', opacity:1, fullscreen:true, }); })

1 2 3 4 5 6 7 8 9 10 11 12

$(document).ready(function() { $('body').videoBG({ position:"fixed", zIndex:0, mp4:'assets/christmas_snow.mp4', ogv:'assets/christmas_snow.ogv', webm:'assets/christmas_snow.webm', poster:'assets/christmas_snow.jpg', opacity:1, fullscreen:true, }); })

よくないところ

・ブラウザによる対応できる動画のフォーマットが違う
動画ファイルをいっぱい作らなければならない
・意味不明なオプションがいっぱいある
textReplacementなど、使う気がしない
・apacheの設定にも関係あるに気がする。
httpd.confもしくは.htaccessにAddTypeでmimetypeを追加する必要ある？

Apache

AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg AddType video/webm .webm AddType audio/webm .weba AddType video/mp4 .mp4 AddType video/x-m4v .m4v

1 2 3 4 5 6 7

AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg AddType video/webm .webm AddType audio/webm .weba AddType video/mp4 .mp4 AddType video/x-m4v .m4v

WRITER

スターフィールド編集部

この著者の記事を見る