動画を自動再生させたい
videoタグでの埋め込みの場合、以下のように設定します。
<video src="/img/video.mp4" poster="/img/video_poster.png" autoplay="" loop="" muted="" playsinline></video>
ポイントは、videoタグに次の属性を入れることです。
- autoplay（自動再生）
- loop（動画をループ再生）
- muted（ミュートにする。これをしないと自動再生されないブラウザがあります）
- playsinline（インライン再生。これをしないとiPhoneで表示されません）
参考サイト：
videoタグのつまずき／スマホで再生されない/playsinlineの存在｜
umlaut.club
動画の読み込みを早くしたい
videoタグ vs YouTube埋め込み
調べたところ、YouTubeの埋め込みで四苦八苦されている記事を発見。
YouTube埋め込みだと、
- 動画差し替え時にいちいちYouTubeにアップする必要がある。
- 外部からの読み込みなので、内部データよりも読み込みが遅くなる。
という理由で、videoタグの方を採用しました。
「どーーーーーしても、YouTubeを埋め込みしないとダメなんだ！」
という場合は、こちらのサイト様が参考になると思います。
→埋め込みyoutubeが想像以上に戦犯級だった件｜ma-ya’s CREATE
「ページ全体の読み込みを軽くする」のが大前提
とにかく読み込むデータを軽くする！！！
サイト制作において、これは避けては通れません。。。
最低限、以下のことはしておきたいです。
- 画像の遅延読み込み
- 画像をなるべく軽くする
- JavaScriptを最後の方に読み込む
posterは設定するべし
posterを設定すると、
動画の読み込みが完了するまで、設定した画像を表示させておきます。
これがないと、動画の読み込みが完了するまで、何も表示されません。
（設定の仕方は上のコードを参照。）
preloadは効果あるのか？
videoタグの属性にpreloadがありますが、
自分的にはあまり効果がなかったと思います。
最終手段として、最初にローディングアニメーションを入れる
「動画が最初の方、静止画になっている」
とお客様からご指摘があったのですが、
これは、動画の読み込みに時間がかかっているので、
その間、posterの画像が表示されているのが原因です。
「ページ全体の読み込みを軽くする」のが大前提ですが、
トップページは特に、画像もJavaScriptも使って派手にするので、
どーーーしても重くなりがちです。
ごまかしになってしまいますが、
最初にローディングアニメーションを入れることで、
アニメーション終了後、おおよその要素が読み込み終わっているので、
有効な手段の一つと思っています。
ただ、ローディングアニメーション終了後、
動画はすでに自動再生が始まっているので、
最初から再生はされないです。。。
そんなの気にしない場合にご使用ください。