Web制作

解決！スマホで動画が自動再生されない時はココをチェック

動画コンテンツの需要・供給も増え、様々なコーポレートサイトやLP内に動画を埋め込むことも多いかと思います。
今回はある案件作業中に「自動再生設定された動画が、スマホで見ると再生できていない」というトラブルが起きた時に対応した解決法をご案内します！

この記事では前提として、下記のような動画埋め込みコードがあるとします。

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

mutedはは無音、loopは繰り返し再生です。
通常はvideoタグにautoplayを書くだけで、動画を自動再生設定にすることができます。

とりあえず解決法！

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

Videoタグ内に「playsinline」を追記しました。
「playsinline」は動画をインラインで再生するよう指定するものです。
「playsinline」を記述した場合、その要素が埋め込まれた場所で動画が再生されることになります。
ただし、記述しなくても多くの場合はデフォルトで動画をインライン再生する動作になっています。

これだけでほとんどのスマートフォンで動画の再生が可能になったはずです。
なお、実は「スマホで動画が自動再生されない」という現象は記事投稿現在、iOSスマホ（iPhone）のみで起きているようです。

「playsinline」を書いたのに自動再生されない場合…

前述した「ほとんど」という条件に当てはまらず、「pllaysinline」を記述したのに動画の再生ができない場合は、使用しているiPhoneの設定で「低電力モード」がオンになっている場合があります。
この場合は、残念ながらユーザー側が設定を変更しない限り、動画が再生されない可能性が高いです。

どうしてもという場合は、GIFなどの形式ファイルに変更してサイト内に差し込む方が「再生」という点では安心かもしれませんね。