Chromeで自動再生がされないのを回避

Chromeで動画を自動再生しようとしたときに下記のエラーが表示され、再生ができませんでした。

      <video
        width="1024"
        height="480"
        id="videojs-vr-player"
        class="video-js vjs-default-skin"
        controls
        playsinline
        crossorigin="anonymous"
      >
        <source src="temp/{{ src }}" type="video/mp4" crossorigin="anonymous" />
      </video>

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

原因

URLが記載されていたので確認をしてみると、音声あり状態の場合は自動再生にはユーザーのアクションが必要であると言うことでした。
Chromeの自動再生ポリシーには以下が記載されています。

• ミュートされた自動再生は常に許可されます。
• 音声付きの自動再生が許可される条件
  • ユーザーがクリックやタップなどのアクションを行なった
  • ユーザーが以前に音声付きのビデオを再生したことがある
  • ユーザーがモバイルのホーム画面にサイトを追加したか、デスクトップに PWA をインストールした
• トップ フレームは、自動再生の許可を iframe に委任して、音声付きの自動再生を許可できます。

解決策

ミュートにすることで自動再生が可能になりました

      <video
        width="1024"
        height="480"
        id="videojs-vr-player"
        class="video-js vjs-default-skin"
        controls
        playsinline
        crossorigin="anonymous"
        muted
      >
        <source src="temp/{{ src }}" type="video/mp4" crossorigin="anonymous" />
      </video>

最後に

詳しい仕様については下記のサイトに記載されているので確認してみてください。