ChromeやSafariで動画が自動再生されない時の対処法

ウェブサイトに動画を埋め込んだ時、autoplayやplaysinline、webkit-playsinlineをvideoタグに設定していても、ChromeやSafariなどのブラウザだと自動再生されないことがある。

原因は、それらのブラウザで「サウンド付きメディア（動画）は自動再生しない」という設定になっているから。この設定は広告動画などからいきなり音が出ることを防ぐために最近実装されたらしい。

これの対処法としては、videoタグに「muted」属性を加えればOK。

例えばこんな感じで属性を設定します。

<video src="./img/mv.mp4" muted autoplay loop playsinline webkit-playsinline poster="./img/px.png"></video>

まあいきなり音が出るのは目立ちたがり屋の広告主以外は誰もが嫌だと思うので妥当な仕様変更じゃないかなと思います。

ただ、最新版Chromeの元々音声データのない（無音の）動画であっても「muted」属性を加えないと自動再生されないって設定は制作者側にとってはちょっとしたトラップですね。このことに気付かなくて、僕は１時間くらいハマりました。。

え、音声付きの動画を自動再生させたい場合はどうするのって？

ユーザーにとっては迷惑でしかないので諦めましょう！