WEBサイトの背景動画をPC&スマホで自動再生する
よくあるメインビジュアルに背景動画を使用したWEBサイト。ロゴやキャッチフレーズなどを表示する場合は、動画を背景に回す必要があります。
そんな背景動画を調べて実装するまでの道のりを綴ります。
こんな風に見せたい
今回目指したのは、下記サイトのような見せ方です。
PCとスマホ共に背景動画が自動再生されるもの。
【Youtube読み込みjQueryプラグインで実装】
サクッと調べたところ、何やらYoutubeにアップした動画を背景動画として読み込める便利なjQueryプラグイン「Tubular.js」がある模様。しかもレスポンシブ対応!? そして全画面表示のフルコース。
参考にさせて頂いた記事はこちら。
https://dainashiyesterday.com/post-4604/
手順としては、
1.必要なプラグインをDL
2.決まったソースコードを挿入
と簡単なのですが、実装してみると...
簡単に実装できた！！問題なく背景動画表示できている。
しかし...
あれ？
スマホでは再生されない。
スマホで見ると固まったまま...スマホだと背景動画が再生されず、再生ボタンと静止画になっている。
Tubular.jsのデメリット
・スマホで現在は自動再生されない？
・ページ表示時に、読み込みクルクルが表示される
・動画右下に常にYoutubeのロゴが表示される
ということで、別の手段を探しました。
【videoタグでmp4ファイルを背景動画として使う方法】
別の手段を調べていたところ、下記のわかりやすい記事を発見。
https://webliker.info/52510/
mp4ファイルをサーバーにアップロードして、それをvideoタグで読み込む方法。特にプラグインも必要ないので手軽にできます。
記事にあるように、videoタグでは自動再生や、繰り返し再生などを設定できます。私が使用したソースは下記のもの。
<video src="mainback.mp4" webkit-playsinline playsinline autoplay loop muted></video>
というのも最初に紹介した参考サイトもこの形式で実装されていました。
準備完了。実装！！！
ってめちゃくちゃ重い！
そりゃそうです。Youtubeに上げていた生の動画をそのままアップしたのですから。Youtubeでは自動で圧縮しているためサッと表示されるのですね。
読み込みの重いWEBサイトほどユーザビリティの低いものはありません。せっかく動画で魅力的なサイトにしようとしているのに、本末転倒です。
動画を圧縮して軽くする
参考サイトでのスムーズな表示を実現するために調べてみると、データサイズは...
PC用：10,000KB
スマホ用：3,000KB
（長さ40秒程度）
というように非常に軽量なのですね。私が最初にアップした動画はなんと
330,000KB（長さ50秒）もありました。どうりで固まるわけだ。
動画の圧縮には、こちらの記事で紹介されている「HandBrake」を使用しました。
https://liginc.co.jp/342227
圧縮するにしても、やり過ぎると荒くなるので
・ほどほどの綺麗さ
・目標のデータ容量
の2点をバランス良くするため、何度も圧縮してみます。
また、スマホ用に関しては、下記のような縦長い動画にトリミングすることで、より容量を下げることができますし、見やすくもなります。
https://oohirayasai.com/mp4/movieSummerSPD.mp4
以上を試したところ...
見事それなりの画質で容量を下げることに成功！
PC&スマホでスムーズに背景動画が表示されます。
かといって、サイトの読み込みが神速になったわけではないので改善は必要ですが、十分見れるサイトになりました。
参考になれば幸いです。