背景画像に動画を使ったWEBページを最近よく見かけます。WEBで動画を自動再生する方法を簡単に紹介します(・ω・)ノ
スマホ対応するならgifアニメ。 スマホでなくても良いならhtml5のvideoタグ。
ネトゲのランディングページなんかでよく見かける『背景で動画を再生させるページ』ですが、html5のvideoタグかYouTubeのクロムレスプレーヤーを使っている事が多いようです。
あーとくWEBのトップページはhtml5のvideoタグで動画を自動再生してます（PCから見た事ない人は知らないよねｗ）。
各ブラウザの対応状況もバラバラなので、mp4・ogv・webmの各形式の動画を用意してます。動画ファイルのサイズは1MB以内を目標にエンコすると良いでしょう。だから動画のサイズも長さも小さいです。ちなみに<video>タグ未対応のブラウザにはただのjpg画像が表示されます。
また、スマホから閲覧すると、どうやっても動画は自動再生されません（LINEのブラウザや一部のAndroid端末など例外あり）。これはスマホ端末側で動画を自動再生できないようにロックされているので、WEB側の技術でどう頑張っても無理です。
YouTubeのクロムレスプレーヤーを用いる方法だと、最初からYouTubeがクロスブラウザ仕様になってるので、ブラウザ対応楽です。ただ、YouTubeAPIのバージョンが古かったり、JSでチョコチョココントロールするのがちょっと面倒（だった気がする）。
また、html5での動画再生と同様に、WEBページでの自動再生はできません。再生できてもスマホはFlashに対応してないので、アプリでの動画再生になります ⇒意味無いじゃん。
昔懐かしのgifアニメならいける
割と古い手法なんですが、gifアニメを使った場合はPCだろうとスマホだろうと関係なく動画の自動再生が可能です。最近はapng(アニメーションピング)なる新しい規格も登場していますが、各社のブラウザ対応はまだまだ進んでいない様です。
gifアニメの欠点は、とにかく重くなりやすい事です。イラストなら良いのですが、普通に撮影した動画をgifアニメにすると、10秒くらいの動画で10MB超とか普通です。
そんなワケで、とりあえず以下の様にして容量を圧縮。
- 動画サイズを小さくする
- 色を白黒にする（色数を減らす）
- ディザ合成（点々）で中間色を誤魔化すｗ
↑の動画でだいたい2MBです。色数は8色（？）。フレームを減らすって手法もありますが、それやると動きがカクカクになるので回避の方向で・・・。
オリジナルサイズで再生している分にはあまり気にならないのですが、フルブラウザのサイズに引き伸ばすと、ディザのノイズが激しくチラツキますｗｗｗ
そんなわけで、引き伸ばすのを前提にディザなし、思いっきりカットアウトして色数を減らしてみました。
画質はあまり良くないけど、これでファイルサイズが1MB以下に。まあ、雰囲気が伝わればいいやって事でこれで手打ち。
これをCSSのbackground-imageに設定しているのが、あーとくのプロフィールページ（移転に伴い公開を終了しました）です（´・ω・｀）
ちなみに、動画からgifアニメを変換するツールですが、gifアニメ 変換 サイトとかでググると、オンライン上でたくさんサイトが出てきます。細かい設定はできない場合が多いので、僕はPhotoshopでやっちゃってます。
