WEBサイトでメインアイキャッチ画像に動画を利用してみる。

CSS on 25 Feb , 2015

回線速度の水準が上がってきたので動画を利用したwebサイトを
多く見かけるようになった。

いままで静止画が当たり前だっただけに、
動画を使ったサイトに出会うとちょっと印象に残ったりします。

サンプルサイト
http://h-print.co.jp/

実装の手順は実に簡単!html5のビデオタグを利用するだけです。

再生できる拡張子はこちらの3種です。

mp4
webm
Ogg

この3種どれにすればいいの?

って話ですが
結論から言うと、「mp4」を用意すればほぼOKです。

というのも、ブラウザごとに、再生できるファイルが違うため、
過去は「mp4」と、「webm」または「Ogg」のどちらかを用意しないと
主要ブラウザに対応できませんでした。

2015年2月現在
Internet Explorer
Firefox
safari
Google Chrome
の4ブラウザはmp4再生に対応しております。

Operaは、、、、すみません!
静止画対応するなどいかがでしょう、、

Webmかoggを別途用意するのも手ですが少し手間がかかりますね。

※ちなみにサンプルサイトですと
operaは静止画に切り替わります。

mp4に関しては、youtubeの流行もあり今現在出力できる環境も
多いため、動画の用意が容易です。(ヨウイが、、、ヨウイです)

作成する際はH.264というコーデックを利用しますので
是非チャレンジしてみてください。

ここで目安サイズですが。。
メインビジュアルに使う以上重すぎてはだめなので
できるだけ軽くしましょう!

5MB以下
15秒以下

が現時点で理想かもしれません。

加えてサンプルサイトではタグに「autoplay」を指定して
リピートさせています。

その他の属性については仕様をご確認ください!(まるなげ)
http://www.htmq.com/html5/004.shtml

最後に一点注意ですが
2015年2月現在、
スマートフォンでvideoタグやaudioタグの自動再生は対応しておりません。

大容量を勝手にダウンロードさせちゃうと
莫大な料金がかかる可能性があるからですね。

なかなかこの仕様は変わらないんじゃないでしょうか。
スマホで背景動画を使う時代はまだ先かもしれません。

以上、動画を使ったWEBサイトにあなたも挑戦してみてはいかがでしょうか!