WEBサイトの背景に動画を埋め込む方法と考え方について

今回初めてだから学びがあった。

どういうことか

WEBサイトの背景といえば色を付けたり画像を乗せたり、cssのbackgroundで指定する。
だけどもここ数年は洒落たデザインが増えて、背景に動画を埋め込むことも珍しくなくなってきた。
動画ファイルをサーバーにアップしてvideoで表示して、youtubeならapiを使ってposition:absolute;とかz-index:-1;でもってコンテンツの背景に据え置く。裏のレイヤーに設置することで背景として見せる。動画そのものに意味をもたせるんじゃなくて、雰囲気のために動画を使うって感じのやつ。

結構高品質なフリー素材も多いんで、手軽に使うことができるようになってきた。

Youtubeのapiについて

youtubeは普通に埋め込んだら普通にサムネ表示→ユーザーが再生の動作になる。
自動再生したいとか、特定の動画を連続して流したいなとか、そういうのをするためにapiを使う。
youtubeのapiは登録とか必要なく、htmlに打ち込んでしまえばそのまま使える。入力作法に慣れる必要はあるけど、<video>っぽい感じで使えるようになるので用途の幅が増やせる。

動画を背景にする手法について

backgroundで動画ファイルを指定できないんで、前述の通り動画の表示領域をcssで調整する必要がある。で、ただただ画面いっぱいに表示しただけだと不味い。クリックできると動画の操作ができてしまう。カーソルが乗ればコントロールが表示されたりするんで、例えばz-index:-2;で動画を設置してz-index:-1;で透明な要素を重ねて動画をクリックできないようにするみたいなギミックを付ける必要がある。

動画を背景にする問題点

回線速度が上がったといえど、デバイスの処理能力が上がったといえど、動画の容量が減るわけじゃないんで読み込んだら回線を圧迫する。使用量をガリガリ削っていく。要するにクソ重い。

また、背景にする動画を自分のサーバーにアップしたら、そのサーバーの性能によっては読み込みが遅いとかでイライラするかもしれない。
youtubeにアップして使う手もあるけど、アカウントの管理がだるいし、背景用ってことで検索に出ない、公開範囲を限定にすることはできるけど、youtubeロゴを完全に消すことができない、とか、細かくは言わないけどかゆいところが残る。

単純な賑やかしって考えると動画って結構ピーキーなんだなと思う。

動画を背景にしたときのスマホ閲覧の問題点

自動再生設定してミュートにした動画であれば、ページにアクセスすればとりあえず問題なく動く。
ページにアクセスしたあと、別タブを開いて違うページを見たりしたとする。タブをまた切り替えて戻ってきたら動画は止まってて、サムネでもなく動画の途中が表示されたままになる。youtubeであれば領域の下部にサムネが表示された状態になる。

これはホームに戻ってサイドアプリを開いたときも同様で、動画の再生はページの読み込みがトリガーになっていることがわかる。言い換えると、キャッシュを読んでる状態では動画は再生されない。

背景扱いにしてるから動画を操作できないんで再生に持っていけない、そもそも背景の賑やかしをユーザーに再生させる手間はあまりにも不健全。

動画を背景にするコンテンツはスマホ向きではないということになる。

どうしてもスマホで動画を背景にしたい場合

動画ファイルを諦めてGIFファイルにしましょう。
キャッシュで自動再生するデータなんてそれしかない。

mp4→GIFの変換サービスはオンラインにあるし、AdobeのPremiereの書き出しにGIFがあるんで環境さえあれば、とりあえずGIFを作るという点ではなんとかなる。

しかしGIFはmp4と比べると、単純に言って糞重い。
それに言及している記事をさっき読んだ。GIFじゃなくて動画使えよって感じのやつ。
わかるけど、常時再生されているコンテンツを入れ込むことが最優先である場合はGIFを採用するしかないんで状況によりけりの話だよなっていうね。

とりあえず、まんまmp4→GIFは単純に言って10倍くらい簡単に容量が跳ね上がるんで、軽量化作業が必要になる。フレームレートを落としたり画質を落としたり画像サイズを落とす必要がある。それでもどっこいにもっていけたら御の字って感じ。

コンテンツを作る際、裁量を持ってる人と打ち合わせる必要がある。
折衷案を模索するしかない。

現状のまとめ

回線使用量を抑えるため、回線の圧迫を抑えるためにキャッシュってもんがあるんだから、それに抗うっていうのは採用してるブラウザ自体に喧嘩を売る感じになる。それはできないよねっていうね。

検索しても解決策が出てこなかったんで、そういうことなんだと思う。ブラウザの仕様なんだということで納得した。これをいじれたら悪意あるサイトとか作り放題だもんね。

実は調べ方が悪いだけでなんとかなるかもしれないけど、とりあえずはそういうことだと思った。

コメント

タイトルとURLをコピーしました