iPhoneで動画が自動再生されない場合【videoタグ】

最近のスマホブラウザではvideoタグにautoplayを書くだけで、自動再生動画を入れることができます。

しかし、Androidでは自動再生されるのに、iPhoneやiOSでは動かないというトラブルにはまったりしていませんか？

iPhoneやiOSでは、playsinlineも忘れずに書く必要があります！

数年前までは、スマホで自動再生動画を実現するには、 Youtubeの埋め込みでも不可能で、 複雑なjsプラグインを入れたりする必要がありましたが、今は非常に簡単ですね。

iPhone・iOSで自動再生されない場合

その場合、以下のタグを書き忘れている可能性が高いです！

正しく自動再生される記述

playsinlineを書き忘れると、なぜかiPhoneやiOSで自動再生されません。

ということで、自動再生のvideoタグを全部まとめて書くとこうなります。

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

あるいは、

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

mutedはは無音、loopは繰り返し再生です。

無音にしておかないとサイトにアクセスするといきなり音が出てしまいます。
自動再生なので、どこから見ることになるかわからないのでloopも入れておきます。

自動再生動画について

いまや自動再生動画は非常に簡単に設置できます。

AfterEffectで動画サイズの切り出しも簡単にできます。

そのため、ほとんど画像と変わらない扱いができます。本当に便利ですが、あまり多用すると、サイトが重くなりますし、スマホがとっても熱くなります！

このあたりに気を付けて使っていくと良いですね。