如何通过在Html5视频播放器中放置光标来查看帧？

<video id="videoPlayer" controls>
  <source src="video.mp4" type="video/mp4">
</video>

var videoPlayer = document.getElementById('videoPlayer');
videoPlayer.addEventListener('mousemove', showFrame);

function showFrame(event) {
  var video = event.target;
  var rect = video.getBoundingClientRect();
  var mouseX = event.clientX - rect.left;
  var mouseY = event.clientY - rect.top;
  var duration = video.duration;
  var frameCount = Math.floor((mouseX / rect.width) * duration * 30); // 假设视频帧率为30帧/秒
  document.getElementById('frameNumber').textContent = '当前帧数：' + frameCount;
}

<div id="frameNumber"></div>