【html5+css3】背景でyoutube動画を再生したかったけどスマホ対応がめんどくさくて挫折した




背景で動画を再生したい

f:id:levarico:20170525184426j:plain


私はWebの仕事の人ではないし、htmlもcssもほとんど独学のまったくの素人だ。
だけどWebページを作るのが好き。暇を見ては「Webクリエイターボックス」や「PHOTOSHOPVIP」を覗いて心を躍らせている。

で、背景で動画を再生するというのを一度やってみたかった。
1ページ完結型の作例で小林大輔写真事務所を見たからだ。

これめちゃくちゃかっこよくない???

この動画は小林大輔さんの

シンプルで強い写真、魂のこもった写真撮ります。
(公式サイトより)

という言葉をすごくよく表している。
動画を見ただけでこんなにインパクトがあって、かつ、サイト全体も1ページできれいにまとまっていて、見ててわくわくする。

こういうページを作れたら楽しそうだなあ、真似してみたいなあと思ったのだ。



背景で動画を再生するのに必要なもの

html5videoタグを使えばなんとなくできるんだろうなーくらいの知識はあった。
このページの手順に沿ってやってみよう。

使用したい動画

youtu.be

ただいま爆推し中の東京女子流

ネット上の動画を使うのは著作権的にアウトだけど、今回はあくまで趣味の範囲(と言い切る)だし。
ただ、Youtubeの動画をそのまま背景に使用できるんだろうか。
通常ならmp4などの動画ファイルをサーバにupして呼び出すよね。


背景でYoutube動画を再生する方法

背景に使う動画は、下記の点に注意してください。
動画の長さは、15-30秒くらい。
自動再生対応。
音声は無し。
テキストを上に重ねても読めるような動画。
動画は明瞭で簡潔なもの。
YouTubeの動画を利用するので、自サーバーのレスポンスを気にする必要はありません。

coliss.com


あっこの時点でアウトっぽい気がする。
クリエイターボックスとか、ほかのページでも同じようなことが書いてありました。
しかもこの記事は古すぎるせいかデモページが機能してませんでした。私だけか???

Youtubeで30秒くらいの無音動画を探すのが大変

そりゃあいきなり音声が出たら困るし、1分の動画でもエンコードによるけど数十MBとか普通ですもんね。
Instagramでさえたまにすっごい重い動画とかありますもんね。
いくら自サーバのレスポンスを気にしなくていいといってもjQueryを使っているので実質サーバは必須だし。

テストページだしyoutubeを使うなら無料サーバでやれたりしないかなって一瞬考えたのですが、基本的な条件にあてはまる動画をyoutubeから探すのが難しい以上、自前で動画ファイルを用意しないといけない。
無料サーバで動画ファイルに対応してるとこなんてなかなかないですよね。

スマホ対応が意外とめんどくさい

もうひとつの大きな問題はこれだ。iPhoneandroidも背景動画の自動再生には対応してない。らしい。iOS10以降ならできるようになっていた。
qiita.com

詳細は上記ページ参照。
“自動再生”はできるけど閲覧側のWi-Fi接続は必須ですね。これじゃまだまだ実用にはならないと思います。

やっぱりGIFしかないのか

CSS3のanimationとstepsを使えば静止画を動画のように動かすことはできるけど、実写映像はかなりきつい。
30fpsの30秒動画で約900枚の画像ファイルが必要だとして、フルカラーだとjpgでも1枚当たり500KB~1MBくらいは平気でいくでしょう。解像度を考えたらもっと必要かも。

842*472という半端な大きさの30秒動画をAdobe Premiereで試しに書き出してみたら330MBだった。
一応動かしてみたけど、とても重くて、コマ毎に何度もタイムアウトするわ読めてもカクカクだわでぜんぜんだめでした。

animationで動かしたいときにかなり参考になるページは以下。
kimizuka.hatenablog.com
tokidoki-web.com
[JS] パラパラマンガ用JSを作ってみました | nbnote blog
jsでパラパラアニメ - phantom4


やっぱりGIFじゃなきゃだめか。
でもアニメーションGIFって背景指定できたっけな???と不安になったので調べてみました。

See the Pen Full-screen animated gif background by Mark Lee (@leemark) on CodePen.

こんなのを見つけました。普通にできるみたいですね。