ウェブサイトに動画を埋め込んだけどスマートフォンで自動再生されない…なんてときは、ブラウザに対応した属性が足りてない可能性が高いです。

動画は<video>タグにautoplay属性を追加するだけで自動再生ができる仕様ですが、ブラウザを開発しているベンダーによって使い方が異なってくるので個々のブラウザに対応した属性を追加する必要があります。

動画を自動再生させる基本のコード

動画を再生させるには、<video>タグにautoplay属性を追加するだけで可能です。

<video src="movie.mp4" autoplay></video>

これで基本的にはブラウザで動画を自動再生させることができますが、iPhoneとChromeではさらに工夫が必要になります。

iPhoneにはplaysinline属性が必要

まずiPhoneにはautoplay属性に加えてplaysinline属性が必要になります。playsinline属性は、「この動画をインラインで再生させる」というもので、それにautoplay属性を組み合わせることで自動再生が可能になります。

<video src="movie.mp4" autoplay playsinline></video>

これでiPhoneの自動再生ができるようになりました。

Chromeにはmuted属性が必要

Chromeにはautoplay属性に加えてmuted属性が必要になります。muted属性は、「ミュートにする」というもので、autoplayとmuted属性があればChromeで自動再生ができるようになります。

このmuted属性はChromeのユーザビリティの観点から必要なもので、例えば、電車でウェブサイトを読み込む → 大音量で動画の音声が再生される → ギャーッ！というかなり迷惑なトラブルを未然に防ぐことができます。

<video src="movie.mp4" autoplay muted></video>

これでChromeに対応した自動再生ができるようになりました。

オールマイティーに使える自動再生タグ

というわけで、PCにもiPhoneにもChromeにも全てのブラウザに対応させたタグは下記のものになります。

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

ループ再生をさせるためのloop属性を追加しておいて、これで全てのデバイスで動画の自動再生ができるようになります。

さいごに

最近はウェブサイトに動画を埋め込む機会も多くなってきたので、<video>タグの正しい使い方を知っておくことで再生されないトラブルを防ぐことができます。

ぜひ、覚えておきましょうー！