【備忘録】ChromeでUncaught (in promise) DOMException: The play() request was interrupted by a call to pause()を解決する方法

概要

Chromeでvideoタグを使用してネットワークカメラが保存した動画を再生させていたが、
chromeのアップデートが関係しているのか、動画側に問題があるのか、JSで操作できない動画が発生した。

原因

動画が再生されている状態でJSのPlay()を実行したことだと思われる。
問題がある動画と問題のない動画の違いをFFmpegで解析したところ、
メタデータのエンコーダーがGStreamer matroskamux version 「1.16.1」または「1.14.0」のものに原因がありそう。

備考

Chromeのバージョン：132.0.6834.111
動画のメタデータ(エンコーダー)：GStreamer matroskamux version 「1.16.1」または「1.14.0」
エラー文：Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

修正前(再生できない動画があった)

　処理の流れ：video.currentTime = <任意の数値>　→　video.play();

【HTMLファイル】
<Video id="video" src="<動画のパス>"></video>

【JSファイル】
// Videoタグの情報を取得する
video = document.getElementById('video'); 

// 動画が再生可能になった時に実行する処理を指定する
video.addEventListener('canplaythrough', function () { event_canplaythrough() }, false);

// 動画を任意の箇所から再生する処理
function event_canplaythrough() {
  video.currentTime = <任意の数値> // 再生位置を指定する
  video.play();                   // 再生する
}

修正後(全ての動画を再生できるようになった)

処理の流れを変更した：video.play();　→　video.currentTime = <任意の数値>

【HTMLファイル】
<Video id="video" src="<動画のパス>"></video>

【JSファイル】
// Videoタグの情報を取得する
video = document.getElementById('video'); 

// 動画が再生可能になった時に実行する処理を指定する
video.addEventListener('canplaythrough', function () { event_canplaythrough() }, false);

// 動画を任意の箇所から再生する処理
function event_canplaythrough() {
    video.play();                   // 再生する
    video.currentTime = <任意の数値> // 再生位置を指定する
}