背景に動画使ってるサイトって見たことあります？実際、新しいサイトの多くがこれを実装しています。
ちょっと実装した経験のメモとして書いていきます。
まず、例を２つほど見てみましょう
https://www.nintendo.co.jp/wiiu/agmj/ スプラトゥーン公式HP
http://www.marketfactory.com/ Market Factory
スプラトゥーン公式みたいに、背景にその製品のCMやPVといったものをのせることで、ユーザーにその製品がどのようなものなのか伝わりやすくなります。
Market Factoryみたいに、シンプルでかっこいい動画を置いておくだけで、なんとなくかっこいい感じします。
この背景動画は実際のところ実装自体はそこまで難しくないので、簡単にコード置いておきます。
用意するもの
- 背景動画（.webm形式）
- 背景動画（.mp4形式）
- 背景動画の０秒の部分をスクショした画像データ
背景動画は同じものを２つ、webmとmp4で用意してください。
秒数は１５秒以内がいいと思います。動画が長いと、それだけ容量が重くなりますので。
動画に関しては「ループしても違和感のないもの」を用意してください。そういった意味では例に出した２つのサイトは別のアプローチでループしても違和感ないようにしてるので参考になると思います。
「動画なんて用意できる環境ねーよ」って人は以下のまとめにあるサイトで無料で動画DLできるので、それを使ってみてもいいと思います。商業可かどうかについては調べてないので確認してください。
http://matome.naver.jp/odai/2135832117809141301
ちなみに、「動画 無料」とかで検索するとピンク色なサイトが表示されるので注意。
HTML
<video autoplay loop poster="aaa.jpg" class="video"> <source src="aaa.webm" type="video/webm"> <source src="aaa.mp4" type="video/mp4"> </video>
html5のvideoタグを使います。videoタグは動画を表示できるタグです。imgの動画版みたいな。雑すぎ？
せっかくなんでvideoタグの属性について補足します。
autoplay
自動再生します。背景動画なら属性に書いておきましょう。
controls
コントロールパネルを表示します。背景動画の場合はつけなくていいと思います。上のにはついてません。
height
動画の高さ設定です。場合によりけりですけど、背景動画に使う機会は今のところ少ないと思います。
width
動画の横幅設定です。場合によりけりですけど、背景動画に使う機会は今のところ少ないと思います。
loop
繰り返し再生するかどうか。背景動画は書くのがデフォルトみたいになってる気がします。
muted
無音設定です。使ってもいいですけど、読み込み時少し音出るみたいな不具合起こしたくないなら、元から無音の動画用意した方がいいと思います。そういう不具合あるかわかりませんけど。
poster
動画が読み込まれて再生されるまで表示されてる画像。正直必須です。
preload
動画の読み込みに関すること。背景動画にはあまり関係ないと思います。
src
動画のファイル指定なんですけど、今回は使いません。
各属性の詳細については適当にリファレンスでも見れば出ますのでそれを見てください。
さて、videoタグに挟まれてsourceタグが２つありますね。これが動画ファイルになります。
２つある理由は、表示されない不具合などを極力なくすためとか。そのうち.webmだけになりそうな気はしますが、現状だと２つ書いた方がいいみたいです。
CSS
.video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url(../aaa.jpg) no-repeat;
background-size: cover;
transition: 1s opacity;
}
こんな感じ。背景画像とそんな変わらないと思います。
positionに関してはabsoluteかfixedに。あとは右下に配置して、１００％にしてって感じですね。
z-indexをマイナスにして、動画の上に置くやつにはz-index: 2;とかそんなんにすればいいです。
backgroundも一応設定すればいいと思います。配置する画像はvideoタグのposter属性に使ったものと同じもので。
これで背景動画は以上になります。デモ？そんなものはない！
一応他にも背景動画使う方法ありそうなんですけど、不具合防止とか汎用性考えて上の書き方にしてます。
補足
動画の上に置くものにはposition:absoluteを忘れずに。そこらへんは画像の上に文字とかボタン乗せると変わりません。