TL; DR
Auto-Play Blocking は音声つき動画が自動再生されないよう Safari を設定できる機能ですが、 「音声なし動画の自動再生」「音声つき動画をミュートで自動再生」「音声つき動画を、ユーザ操作を契機として再生」することは可能です。
Auto-Play Blocking とは
macOS 10.13 High Sierra に搭載される Safari 11.0 に、動画の自動再生を抑制する Auto-Play Blocking 機能が採用されます。 Auto-Play Blocking は、 Web サイトごとに以下 3 種類のルールを適用することができます。
- Allow All Auto-Play
- 自動再生を許可します。これまでの Safari の動作です。
- Stop Media with Sound
- 音声ありの動画の自動再生を抑制します。デフォルトではこのルールが適用されます。
- Never Auto-Play
- すべての自動再生を抑制します。
これは macOS 向けの機能で、 iOS 11 の Mobile Safari には採用されていません。 ( 追記: Mobile Safari 向けには、これとは別に iOS 10 から採用された自動再生抑制のポリシーがあります → New <video> Policies for iOS )
試してみた
音声なし動画の自動再生
Auto-Play Blocking は「音声つき動画を自動再生しない」機能なので、まずは音声なし動画を再生してみます。 検証に使用する HTML タグは以下のとおりです。
<video autoplay> <source src="https://example.com/video.mp4" type="video/mp4"> </video>
結果は以下のようになりました。 音声なし動画なので Stop Media with Sound は再生され、音声有無を問わない Never Auto-Play は再生されませんでした。
ルール | 再生可否 |
---|---|
Allow All Auto-Play | ○ |
Stop Media with Sound | ○ |
Never Auto-Play | × |
音声つき動画の自動再生
ここからが本題です。音声つき動画を自動再生してみます。
<video autoplay> <source src="https://example.com/video.mp4" type="video/mp4"> </video>
Stop Media with Sound も再生されません。
ルール | 再生可否 |
---|---|
Allow All Auto-Play | ○ |
Stop Media with Sound | × |
Never Auto-Play | × |
音声つき動画をミュートで自動再生
音声つき動画の音声を OFF にした場合はどうでしょうか。
<video autoplay muted> <source src="https://example.com/video.mp4" type="video/mp4"> </video>
今度は Stop Media with Sound でも再生できました。
ルール | 再生可否 |
---|---|
Allow All Auto-Play | ○ |
Stop Media with Sound | ○ |
Never Auto-Play | × |
音声つき動画を JS で再生
autoplay 属性を付けなければいいのでは?と思い、 autoplay ではなく JS で再生を試みました。
<script> window.addEventListener('load', function() { let video = document.getElementById('v'); video.play(); }); </script> <video id="v"> <source src="https://example.com/video.mp4" type="video/mp4"> </video>
結果は autoplay 属性を指定した場合と変わらず、 Stop Media with Sound は再生されません。 play メソッドでエラーが発生していました。
Unhandled Promise Rejection: NotAllowedError (DOM Exception 35): The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
ルール | 再生可否 |
---|---|
Allow All Auto-Play | ○ |
Stop Media with Sound | × |
Never Auto-Play | × |
音声つき動画をページロード後数秒待ってから再生
ページロード時に自動再生されないなら、ロード完了後に少し時間をおいて再生するのはどうでしょうか。
<script> window.addEventListener('load', function() { window.setTimeout(function() { let video = document.getElementById('v'); video.play(); }, 3000); }); </script> <video id="v"> <source src="https://example.com/video.mp4" type="video/mp4"> </video>
これもダメで、 Stop Media with Sound は再生されず、 play メソッドでエラーが発生しました。
ルール | 再生可否 |
---|---|
Allow All Auto-Play | ○ |
Stop Media with Sound | × |
Never Auto-Play | × |
音声つき動画を画面がクリックされたら再生
ページロード契機が全くダメなので、ユーザ操作を契機としてみました。
<script> window.addEventListener('mousedown', function() { let video = document.getElementById('v'); video.play(); }); </script> <video id="v"> <source src="https://example.com/video.mp4" type="video/mp4"> </video>
今度は Stop Media with Sound も再生されました。 ユーザ操作を契機とする場合は「自動再生」にあたらないようで、 Never Auto-Play でも再生されました。
ルール | 再生可否 |
---|---|
Allow All Auto-Play | ○ |
Stop Media with Sound | ○ |
Never Auto-Play | ○ |
音声つき動画を画面がスクロールされたら再生
何らかの操作を契機にすればいいなら、と思い、ページスクロールも試してみました。
<script> window.addEventListener('scroll', function() { let video = document.getElementById('v'); video.play(); }); </script> <video id="v"> <source src="https://example.com/video.mp4" type="video/mp4"> </video>
Stop Media with Sound も Never Auto-Play も再生されず、 play メソッドでエラーが発生しました。
scrollTo()
を使えばユーザが操作しなくてもスクロールを行えるからでしょうか..?
ルール | 再生可否 |
---|---|
Allow All Auto-Play | ○ |
Stop Media with Sound | × |
Never Auto-Play | × |
音声つき動画をミュートで自動再生したあと、ミュート解除
最後に、自動再生を開始したあとにミュートを解除できるのか試してみました。
<script> window.addEventListener('load', function() { let video = document.getElementById('v'); video.addEventListener('play', function() { video.muted = false; }); }); </script> <video id="v" autoplay muted> <source src="https://example.com/video.mp4" type="video/mp4"> </video>
結果はダメで、 Stop Media with Sound も Never Auto-Play も以下のエラーが発生し、
Unhandled Promise Rejection: [object DOMError]
以下のいずれかの動作となりました。
- ミュートを解除できず、音声 OFF のまま再生を続ける
- 再生自体止まってしまう
( どちらの動作となるかはタイミング依存のようです )
ルール | 再生可否 |
---|---|
Allow All Auto-Play | ○ |
Stop Media with Sound | × |
Never Auto-Play | × |
まとめ
まとめると、 3 種類のルールはそれぞれ以下の動作となります。
- Allow All Auto-Play
- これまで通り、自動再生可能
- Stop Media with Sound
- Never Auto-Play
- すべての動画はユーザ操作を契機としたときのみ再生可能
デフォルトは Stop Media with Sound なので、音声なしでの再生はユーザが設定を変更しない限りこれまで通り可能です。 音声つき動画を再生したい場合や、 Never Auto-Play でも動画を再生したい場合は、ユーザ操作イベントを契機に再生開始する必要があります。 ( この機能が採用された意図を考えると、再生制御をやめてビデオコントロールを表示するのが一番素直な対応だとは思いますが.. )