SafariのAuto Play Blockingの有効性をJSで確認する

モバイル版じゃなくてもSafari 11からは音声付きの動画は自動再生されないらしいので、これが有効な場合は音声無しで自動再生させたい。

音声付きの動画を自動再生させたい

この考え自体、個人的にはどうかしてると思うんだけど、中にはこういう狂った要望もあるので。
まずは音声無し（ミュート）状態での再生。

// use jQuery or Zepto
let $video = $('video').get(0);
$video.muted = true;
$video.play();

で、音声有りの場合はこれのmutedを削除、もしくはfalseでやればOK。
かと思ったんだけど、ここで表題のSafariのAuto Play Blocking機能の登場。これが有効な場合は再生がされない。
ちなみにGoogle ChromeとFire Foxは今のところ音声付きでも自動再生できる。他のブラウザは知らね。

SafariのAuto Play Blocking機能って？

これはこちらのサイトに詳しく記載されている。こういう風にいろんなパターンで検証してくれている情報は本当にありがてー！

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

で、どうするか

概要がわかったところでJSで機能が有効な場合はどうすればいいのか。
以下のページの最下部にあった。

Bitmovin
To Play, or Not to Play – New AutoPlay Policies for Safari 11 and Chrome 64

こちらにならって

let $video = $('video').get(0);
let promise = $video.play();

if(promise !== undefined){
    promise.catch(error => {
        $video.muted = true;
        $video.play();
    });
}

Auto Play Blockingがどうこうってより、とりあえず再生してエラー吐かれたらミュートにして再度再生って感じかな。正確な対処法じゃないかもしれないけど今回はこれでいいとしよう。
あとこの海外のブログ、内容はほとんど読んでないけどタイトルを見る限りChrome64も同じ機能があるのかな。まぁそれでもこの方法で回避できるはず！きっと！！

余談

FireFoxだけ動画が赤い気がする。