HTMLMediaElementの即時再生可能になるまで待つ時の注意点

概要

メディア再生が可能になるまで待って、即時再生をする場合に注意することの備忘録です。

注意点

メディア再生が可能になるまで待つ処理を書くときにHTMLMediaElementのcanplayイベントがPromiseの実行より前に発火している場合があるので、readyState プロパティの状態も見てあげないと実行タイミングによってはresolve() できない。
つまり、サンプルコードのようにreadyStateプロパティによるresolveをしない場合、

if (videoElement.readyState >= 3) resolve()

実行タイミングによってはPromiseの値が返却されない可能性があります。

サンプルコード

const onCanPlayVideoPromise = (videoElement: HTMLVideoElement) => {
      return new Promise<void>((resolve) => {
        if (videoElement.readyState >= 3) resolve() // readyStateプロパティが0,1,2の場合は即時再生不可
        else {
          videoElement.oncanplay = () => {
            resolve()
          }
        }
      })
    }
await onCanPlayVideoPromise(this.videoElement)