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
- 「音声なし動画」「音声つき動画をミュート」は自動再生可能、それ以外はユーザ操作が必要 ( = iOS 10 の Mobile Safari のインライン再生と同じ挙動 )
Never Auto-Play
- すべての動画はユーザ操作を契機としたときのみ再生可能

デフォルトは Stop Media with Sound なので、音声なしでの再生はユーザが設定を変更しない限りこれまで通り可能です。音声つき動画を再生したい場合や、 Never Auto-Play でも動画を再生したい場合は、ユーザ操作イベントを契機に再生開始する必要があります。 ( この機能が採用された意図を考えると、再生制御をやめてビデオコントロールを表示するのが一番素直な対応だとは思いますが.. )

takasfz blog

Safari 11 の Auto-Play Blocking を試してみた