自動ループ再生の動画の秒数と連携する

想定用途：「mvの背景などで自動ループ再生（音無しが必須のためデフォルト音無し）している動画の一定の秒数で静的なhtml要素をアニメーションさせたい。」

当初、動画が再生開始するタイミングを受け取り、そこからjsでsetIntervalで秒数を数えながら動画内容に連携してる風（←重要）にアニメーションする。を実装していたがjs側での秒数カウントがループを重ねるごとにずれていくことが判明。断念。

videoDom.addEventListener('timeupdate',…
で動画の秒数を常時？受け取るようにし、配列で指定していた特定の秒数のときのみアニメーションを起動（サンプルではaddClass）している。console.logで確認していると1秒に4回ほど処理が走っているためパフォーマンスには良くないと思われ。改善点模索中…

実際の処理はこれ。

const script = () => {
  const videoTimeDom = document.querySelectorAll(".videoTime")[0]


  // 起動したいタイミング指定
  // @todo 数字で指定できると楽。
  const array = ['0:04', '0:08', '0:13', '0:17', '0:22', '0:26']


  videoDom.addEventListener('timeupdate', () => {
    // @todo 現状だと処理が動きすぎる感もあり…どこかで絞りたい
    if (videoDom.currentTime !== 0) {
      console.log(videoDom.currentTime)


      videoTimeDom.innerHTML = timeConvert(videoDom.currentTime)


      // 特定の秒数のときアニメ起動。
      if (array.includes(timeConvert(videoDom.currentTime))) {
        animeDom?.classList.add('active')
      } else {
        animeDom?.classList.remove('active')
      }
    } else {
      videoTimeDom.innerHTML = '0:00'
      // console.log('0:00')
    }
  })
}
//数値型から”00：00”表記への変換（秒、ミリ秒の場合）
const timeConvert = (time: number) => {
  // 小数点切り上げ
  // 0:をくっつける(仮)
  return '0:' + String(Math.ceil(time)).padStart(2, '0')
}

（余力あればvideoタグ以外、youtubeやvimeo埋め込みなどでも動作確認したい。