videoタグで自動再生させるときの注意点！iOSはplaysinlineが必要
HTML5から導入されたvideoタグは便利ですが、環境によって動作が異なるので注意が必要です。自動再生させるときには、autoplay属性が必要ですが他にmuted属性とplaysinline属性が必要になります。自動再生が必要な場合は、この3つの属性をセットで覚えておきましょう。
videoタグ
videoタグはHTML5から導入されたタグで、ページに動画を埋め込みする時に使うタグです。
使い方はシンプルで、これまで画像を使うときに使っていたimgタグと使い方は似ています。
ほとんどのwebブラウザに対応しており、ファイル形式はmp4でOKです。
videoタグの書き方
<video src="video.mp4"></video>基本的な書き方はこれでOKです。
ただし、属性を与えなければ再生できません。
videoタグにはいくつも属性があり、自動再生やループなどの機能をつけることができます。
自動再生させるときの注意点
埋め込みした動画を自動再生させる属性autoplayの使い方に注意が必要です。
<video src="video.mp4" autoplay></video>この記述では、自動再生されません。
なぜならautoplay属性には条件があり、muted属性も付与しなければいけません。
ブラウザ側で自動再生したいなら、音は出しませんよというプログラムになっているんですね。
<video src="video.mp4" autoplay muted></video>これで自動再生ができるようになります。
iOSでの注意点
videoタグにautoplay属性とmuted属性を付与すれば自動再生されますが、iOSでは自動再生されずタッチすると全画面表示で再生されてしまいます。
そこで、もうひとつの属性が必要です。
playsinline属性を与えることで、iOSでも埋め込んだ状態で自動再生できます。
<video src="video.mp4" autoplay muted playsinline></video>まとめ
videoタグはとても簡単で便利なタグで属性がたくさんあり、様々な機能を与えることができます。
ただし、デバイスやブラウザによって条件があるので使い方に注意しましょう。
自動再生が必要な時は、3つの属性autoplay, muted, playsinlineはセットで覚えておきましょう。
