【Javascript】スマホ動画を自動再生されないときに発生したエラーの原因と対処法

こんにちは、nishi_talk(@nishi_talk)です。 今回は、スマホ動画を自動再生するときに発生したエラーの原因と対処法をご紹介します。 まず、私がスマホ動画を自動再生する実装をした時に遭遇したエラーです。
動画は自動再生されませんでした。
Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
コンソールを確認したら「Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.」のエラーが。
これはSafariの自動再生のポリシーの変更によって、ユーザーがクリックなどのアクションを起こさないと動画を自動再生されないようになっています。
動画を読み込んだ後、クリックする処理を追加したりしたんですが、ダメでした。。。

動作しなかった実装

エラーが発生したコードを記載します。

HTML

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

Javascript

$(window).on('load', function(){
  var v = document.getElementById("video");
  v.play();
  });
});

動作した実装

HTMLは変更無しです。
Javascript側だけ変更してます。

HTML

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

Javascript

let videoElem = document.getElementById("video");
playVideo();
async function playVideo() {
  try {
    await videoElem.play();
  } catch(err) {
    console.log(err);
  }
}