JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li>FPS: <span id='fps'></span></li>
  <li>フレーム数: <span id='frame-count'></span></li>
</ul>
<video autobuffer controls>
  <source id='mp4'
          src='http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4'
          type='video/mp4'>
</video>;

JavaScript

/**
 * video 要素の動画のフレームについての情報を得る
 * @params {HTMLVideoElement} videoEl
 */
const getVideoFrameMeta = async (videoEl) => {
  const tmpSec = videoEl.currentTime; // 元々の動画の位置を記憶

  // 次のフレームの開始地点に移動
  // p 秒から q 秒まで n フレーム目が表示される、の p 秒ぴったりに移動するイメージ
  await videoEl.seekToNextFrame();

  const sSec = videoEl.currentTime; // n フレーム目の秒数を記憶
  await videoEl.seekToNextFrame();        // n + 1 フレーム目の開始地点に移動
  const eSec = videoEl.currentTime; // n + 1 フレーム目の秒数を記憶

  // 動画の再生位置を元に戻す
//  videoEl.currentTime = tmpSec;

  const fps = eSec - sSec; // 1フレーム分の秒数
  const frameCount = videoEl.duration / fps; // 全体の動画長（秒） / 1フレームの長さ（秒） = フレーム数

  return { fps, frameCount };
};

// 目的の video 要素を得るセレクタを使う
const videoEl = document.querySelector('video');
function handler(){
  getVideoFrameMeta(videoEl).then(frameMeta => {

    document.getElementById('fps').innerText = Math.round(1 / frameMeta.fps);
    document.getElementById('frame-count').innerText = Math.round(frameMeta.frameCount);
  });
  videoEl.removeEventListener('canplay', handler);
};

videoEl.addEventListener('canplay', handler);