DOMException: The play() request was interrupted by a call to pause()が出たとき

タグやタグを使った時に、
[Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()]といった
コンソールエラーが出る場合がありまして。

その際の対処方法の備忘録になります。

ちなみにコンソールに一緒に出てくるURLのドキュメントは以下

DOMException: The play() request was interrupted
https://developers.google.com/web/updates/2017/06/play-request-was-interrupted

これ、chromeのみでfirefoxとかsafariは起こらないんですね。。

状況

・videoタグを設置して動画再生を行なっている
・chromeでブラウジングしている
・カルーセルスライダーの中に動画が入っている

やりたかったこと

・cookie判定して有無によってスライドを取り除いたり表示したり

起こった現象

・slickメソッドのslickRemoveを使ってスライドを削除しようとしたら、
The play() request was interrupted by a call to pause()のエラーが出て動画の
再生が起こらなくなった

参考にしたサイト

Audio(Video)タグで"play() request was interrupted …"とかいうエラーが出てきたよ
https://foolean.net/p/679

結果このサイトの情報が解決に繋がったものの、

・動画に対するplay()を投げているのがfor文内にある

という状況から、そのままsetTimeoutで挟んでもundefinedになってplay()ができない。
だったため、以下のサイトも参考に。

for文内でsetTimeoutを使う場合の変数のスコープ
https://qiita.com/yam_ada/items/2867985bcb6b77288548

クロージャにしないとiの参照先は常に一緒になっちゃうんだなぁと理解。

結論としては、play()してる箇所をsetTimeoutで挟んであげるのがよいと。

movies.play();
↓

setTimeout(function(){
  movies.play();
},1000);

↓for文の場合はクロージャで

(function(pram){
  setTimeout(function(){
    movies[pram].play();
  }, pram * 1000);
})(i);

書き方めちゃ適当ですみません。

日々勉強。