<video>タグでの埋め込み動画の自動再生がされない時の対処方法
webページ内への動画の埋め込みはYoutubeやViemoなど外部のツールを利用した埋め込み方法と、videoタグを使った埋め込み方法があります。
今回はvideoタグで「autoplay」を指定しているにも関わらず自動再生しない時の対処方法を紹介します。
自動再生を有効にするには？
iPhone以外の場合は「muted」と「autoplay」と同時に指定する
iPhoneは上記に加えて「playsinline」も指定する
基本的な動画の埋め込み方法
<video src="sample.mp4" />これで基本的には動画を埋め込むことができます。
何も指定していないので１回だけ再生されて一時停止などもすることはできないです。
オートプレイを設定してみる
<video src="sample.mp4" autoplay></video>このように指定することで読み込み後に自動で再生されるようになります。
ただこの時点ではChromeなどでみると自動再生はされません。
iPhone以外で自動再生をさせるには「muted」と一緒に指定する
では、自動再生をさせるにはどうるのか…
とても簡単で「muted」と一緒に指定してあげることです。
<video src="sample.mp4" autoplay muted></video>mutedとは？
動画の音声を消音にする機能となります。
なぜ同時に設定しないといけないのか
基本的にはwebサイトなどにおいて、ユーザーの意思に反して音の出るコンテンツは不快になる可能性があるからと思われます。
自動的に音声 (あるいは音声トラックを含む動画) を再生するサイトはユーザーにとって不快な体験になる可能性があります
昔は設定できた時代もあるようですが今は「muted」が指定してあれば自動で再生しますよ、という仕様になっているようです。
iPhoneの場合はplaysinlineも指定する
<video src="sample.mp4" autoplay muted playsinline></video>このように指定するとiPhoneなどの一部の端末で動かないものも自動再生を有効にできます。
まとめ
<video>タグでの埋め込み動画の自動再生についてまとめてみました。
最近では背景に動画を埋め込むサイトなどが増えてきているのでうっかり忘れたなんてことがないように注意していきたいと思った次第です。