DOM

：

：

HTMLVideoElement.cancelVideoFrameCallback() メソッド

　編集：2022.11.11 by T.A.

[Edge]。→、、、 

partial interface HTMLVideoElement {
    unsigned long requestVideoFrameCallback(VideoFrameRequestCallback callback);
    undefined cancelVideoFrameCallback(unsigned long handle);
};

W3C： ハンドルを指定して、既存のビデオ フレーム要求のコールバックをキャンセルします。

W3C： cancelVideoFrameCallback が呼び出されると、ユーザー エージェントは次の手順を実行する必要があります：

  1. ビデオを cancelVideoFrameCallback が呼び出されるターゲット HTMLVideoElement オブジェクトにします。
  2. 値ハンドルに関連付けられているビデオ フレーム リクエスト コールバックのビデオのリスト内のエントリを見つけます。
  3. そのようなエントリがある場合は、キャンセルされたブール値を true に設定し、動画の動画フレーム リクエスト コールバックのリストから削除します。
構文
HTMLVideoElement.cancelVideoFrameCallback(handle)
HTMLVideoElement HTMLVideoElement。
handle unsigned long の数値。¶詳細不明。
戻り値

undefined。

例
／W3C

window.requestAnimationFrame() の代わりに video.requestVideoFrameCallback() を使用すると、(ブラウザのアニメーション レートではなく) ビデオ レートでキャンバスにビデオ フレームを描画できます。 

<body>
  <video controls></video>
  <canvas width="640" height="360"></canvas>
  <span id="fps_text"/>
</body>

<script>
  function startDrawing() {
    var video = document.querySelector('video');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    var paint_count = 0;
    var start_time = 0.0;

    var updateCanvas = function(now) {
      if(start_time == 0.0)
        start_time = now;

      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      var elapsed = (now - start_time) / 1000.0;
      var fps = (++paint_count / elapsed).toFixed(3);
      document.querySelector('#fps_text').innerText = 'video fps: ' + fps;

      video.requestVideoFrameCallback(updateCanvas);
    }

    video.requestVideoFrameCallback(updateCanvas);

    video.src = "http://example.com/foo.webm"
    video.play()
  }
</script>

HTML： 

<VIDEO id=IdTest src="../../Sample/Eizou_M.mp4" controls muted></VIDEO>

JavaScript： 

function Job(P1, P2, P3){  //P1＝Document.timeline？
  D1=P1;
  D2=P2;
  D3=P3;
}
IdTest.requestVideoFrameCallback(Job);

得られた内容：

D1＝[number]：15109.561

D2 

＝[object]：[object Object]
expectedDisplayTime＝[number]：15109.6
height＝[number]：240
mediaTime＝[number]：0.033367
presentationTime＝[number]：15094.3
presentedFrames＝[number]：2
processingDuration＝[number]：0.005
width＝[number]：320

D3＝[undefined]：undefined

これらから、requestVideoFrameCallback(関数)を呼び出すと、関数に 2 つの引数が渡されるようです。

テスト