スマホでもvideoタグの自動再生を行いたい

スマホではvideoの自動再生がデフォルトで禁止されている

どうも。

最近はスマホの性能も上がってきて、PCだけではなくスマホでもWebページなどでvideoタグを使って自動再生を行いたい場合があると思うのでそれについて。

<video autoplay loop>
    <source src="movie.mp4" type="video/mp4">
</video>

こんな感じにすると、PCでは普通に再生されます。
ただ、スマホではデフォルトではvideoの自動再生は禁止されていてこれでは動かないのです。

スマホではautoplayに加えてmuted,playsinline属性を付けよう

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

これでスマホでも自動再生される。
注意点として、キャッシュが残っていてこの設定にしているのに自動再生されない場合があります。

自分もこれで少しハマったけど、しばらく経ったら普通に動いてました。

ちなみにスマホで音ありの自動再生は難しい模様

スマホでいきなり音が再生されるというユーザー体験はかなり敬遠されている様子ですね。
音あり動画のスマホ自動再生する直接的な方法は見つかりませんでした。

やるとしたら、やはり最初にタップなどをさせておくなどワンクッション必要になりそうですね。