Mac Safariでvideoの自動再生ができない

Safari 11からvideoタグのautoplayが効かなくなっているようだったので、いくつかデモを作って試してみました。

サンプルコード

確認はMac Safari のバージョン11.1.1 で行っています。

まずはvideoタグの属性にautoplayのみ付けてみます。

HTML

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

自動再生されませんでした。
autoplayのみのデモページ

次に、autoplayとcontrolsを付けてみます。

HTML

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

クリックでは再生されますが、この場合も自動再生されませんでした。
autoplay + controlsのデモページ

次にautoplayとmutedを付けてみます。

HTML

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

この場合は自動再生されました。
autoplay + mutedのデモページ

元々無音の動画にautoplayを付けてみます。

HTML

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

無音であれば再生されるかと思ったのですが、この場合は自動再生されませんでした。
無音動画 + autoplayのデモページ

最後に、JavaScriptでボタンクリックした時に再生させてみます。

HTML

<div id="wrapper"></div>
<button id="button">再生</button>

JavaScript

var video = document.createElement('video');
video.src = 'movie.mp4';
document.getElementById('wrapper').appendChild(video);

document.getElementById('button').addEventListener('click', function() {
	video.play();
}, false);

自動再生ではないですが、ユーザーの特定の操作で再生させることもできました。
ユーザーの操作で再生させるデモページ

結果としては、mutedを設定した動画でないと自動再生ができないようでした。

chromeの場合

今回はSafariについて確認しましたが、chromeもバージョン66から自動再生が制限されています。
こちらはSafariと同様にミュート状態であるか、ミュート状態でない場合でも「Media Engagement Index」という指標の数値によって自動再生の可否が決定されるようです。
この数値はユーザーの閲覧状況などに応じて変わり、「chrome://media-engagement/」の右端の項目「Score」で確認できます。

上記デモ5つをchromeのバージョン67.0.3396.99で確認してみて、自動再生ができたのはSafariと同様、3番目のautoplay + mutedのみでした。
「Media Engagement Index」の数値によっては再生される場合もあるかもしれませんが、基本的には自動再生させたい場合はmutedは付けるようにしておいた方がよさそうです。
　

【参考サイト】

• Safari, Chromeの自動再生ポリシー変更のまとめ
• Chrome 66では音声付きメディアの自動再生が制限される | スラド IT
• Autoplay Policy Changes  |  Web  |  Google Developers