DOM

：

：

HTMLVideoElement.requestVideoFrameCallback() メソッド

　編集：2022.11.11 by T.A.

[Edge]。→、、、

W3C： <video>.requestVideoFrameCallback() を使用すると、構成用にフレームが表示されたときに Web 作成者に通知できます。 

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

W3C： 次回フレームがコンポジターに提示されたときに発生するコールバックを登録します。

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

  1. video を requestVideoFrameCallback が呼び出される HTMLVideoElement にします。
  2. video の ownerDocument の video frame request コールバック識別子を 1 増やします。
  3. callbackId を動画の ownerDocument の動画フレーム リクエスト コールバック識別子にします
  4. callbackId に関連付けられたビデオ フレーム リクエスト コールバックのビデオ リストにコールバックを追加します。
  5. callbackId を返します。
構文
HTMLVideoElement.requestVideoFrameCallback(callback)
HTMLVideoElement HTMLVideoElement。
callback コールバック関数。2 つの引数が渡されるようです：expectedDisplayTime ？と更に詳しいそのオブジェクト。
戻り値

unsigned long の数値。¶詳細不明。

例
／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;
}
D=IdTest.requestVideoFrameCallback(Job);  //＝[number]：1

得られた内容：

D は、requestVideoFrameCallback() が呼び出されるたびにカウントアップしていくようです。

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 つの引数が渡されるようです。

テスト