videoタグの自動再生でエラー(Chrome) / Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

videoタグにautoplay属性を付ける、またはjavascriptから初期処理でplay()すると、DOMレンダリング後に掲題のエラーが発生した。

Chromeの場合、ユーザーによるアクションが無いまま自動で音声付きvideoを再生する行為が制限対象らしい。

環境

Google Chrome
バージョン: 81.0.4044.138(Official Build) (64 ビット)

対処

  • ユーザーによる何かしらのアクションの後に再生するようにする

  • muted属性をつける

  • chromeの設定変更

以下のstack overflowに方法が記載されている
https://stackoverflow.com/questions/49930680/how-to-handle-uncaught-in-promise-domexception-play-failed-because-the-use