スマホで動画を自動再生させたい

この記事はこんな方向け
・動画の自動再生方法がわからない
・スマホで自動再生にできない

動画を自動再生させたいという要望がよくあると思います。
videoタグを配置するだけなら簡単ですが、スマホでもとなると難しくなってきます。

videoタグ動画を自動再生する

通常PCから見た時は、videoタグに属性「autoplay loop muted playsinline」を記入すれば自動再生がされます。

autoplay：自動再生
loop：ループ
muted：無音
playsinline：インライン再生（埋め込まれた場所で再生）

<video src="sample.mp4" autoplay loop muted playsinline></video>

しかしユーザーによってスマホから見ると自動再生されない場合があります。

スマホの設定で「低電力モード」がオンになっているか、自動再生をオフにしているためです。これはユーザーによるのでこちらで操作できません。

※youtubeのiframeではスマホでの自動再生ができなくなっています。
引用：ユーザーが費用負担する携帯電話ネットワーク経由で要求していないダウンロードを防止するために、iOS の Safari では組み込みメディアを自動再生できません。必ずユーザーが自分で再生します。
https://developers.google.com/youtube/iframe_api_reference#Autoplay_and_scripted_playback
iFrame Player APIを使用かつ無音指定するとiOSで自動再生ができる可能性があります。

さらに、上記引用でもある通り動画は画像1枚よりも重くなりがちで、wi-fi環境下で閲覧していないスマホの通信容量を消費させてしまいます。

スマホで動画を自動再生する方法として、mp4をgifにする方法があります。

mp4をgifにする（注意点あり）

ブラウザ上で変換してくれる便利なツールがあります。

オンライン動画をGIFへ変換ツール
https://beecut.com/jp/video-to-gif-online

mp4をアップするだけで動画のようなgifを生成してくれます。

ではこれで問題解決かというと、そうではありません。
実際に変換してみると、なんと容量が動画の6〜10倍になってしまうのです。

640x360、6.2MB、1分19秒
↓変換
640 × 360、67.5 MB、1分19秒

これはgif内の画像枚数が多いことによる容量です。
gif圧縮をしても最大半分ほどにしかならず、webサイトに配置するには躊躇います。
動画では無くなりましたが、使い所が難しい方法です。

できる範囲の提案

①動画の特に見せたい箇所を画像にしてスライダーや平置きで配置する。
画像＋解説テキストなど、スマホでは代わり映えないレイアウトになってしまうかもしれませんが、内容が伝わることが大事ですので検討してみたください。

②ユーザーに再生してもらう
こちらで自動再生をコントロールできないので、どういった内容・観てほしい理由などを動画前後にテキストで記載し、再生するはユーザーに委ねます。

この場合、videoタブにposter属性を加えてください。
読み込みが遅い場合に動画があることを見逃されてしまう可能性があるため、サムネイル（ポスター画像）を指定しておきます。

<video poster="画像URL" autoplay loop muted playsinline>
 <source src="sample.mp4"></source>
</video>

まとめ

テキストだけより、動画もあったほうがイメージが伝わりやすい。
ただデバイス・ブラウザによって難しいこともあるため、動画を自動再生させたいと思った時は
・なぜそうしたいのか
・再生することで何をユーザーに伝えたのか
・自動再生することで解決するのか
を考えることで別の策が浮かぶかもしれません。