如何通过JavaScript获取YouTube视频播放/暂停时的帧号？

YouTube官方的iframe API确实没有提供直接获取帧号的接口，但可以通过时间与帧率换算的方式实现，无需下载视频。以下是具体方案：

核心思路 #

帧号的本质是「当前播放时间 × 视频帧率」，所以关键是先获取视频的帧率，再结合player.getCurrentTime()计算帧号；跳转指定帧则反向计算时间即可。

步骤实现 #

1. 获取视频帧率 #

YouTube不会通过iframe API直接返回帧率，但可以通过两种方式获取：

• 如果是你自己嵌入的视频，提前通过YouTube Data API获取视频的帧率信息并存储（比如视频contentDetails字段里的帧率），在初始化播放器时传入使用。
• 对于任意嵌入视频，可在播放器onReady事件触发后，调用player.getVideoData()拿到视频ID，再通过Data API获取对应帧率。

2. 计算当前帧号 #

利用iframe API的状态变化事件（播放/暂停时触发），结合帧率计算帧号：

// 假设已获取到视频帧率videoFps（如24、30、60）
const player = new YT.Player('player', {
  events: {
    'onStateChange': onPlayerStateChange,
    'onReady': onPlayerReady
  }
});

function onPlayerStateChange(event) {
  // 播放或暂停时计算并更新帧号
  if (event.data === YT.PlayerState.PLAYING || event.data === YT.PlayerState.PAUSED) {
    const currentTime = player.getCurrentTime();
    const currentFrame = Math.round(currentTime * videoFps);
    // 更新页面显示的帧号
    document.getElementById('current-frame').textContent = currentFrame;
  }
}

3. 跳转至指定帧 #

接收用户输入的帧号，反向计算目标时间后调用seekTo方法：

function jumpToFrame(targetFrame) {
  if (!videoFps) return;
  const targetTime = targetFrame / videoFps;
  player.seekTo(targetTime, true); // true表示精确跳转
}

// 绑定用户输入跳转事件
document.getElementById('jump-btn').addEventListener('click', () => {
  const inputFrame = parseInt(document.getElementById('frame-input').value);
  if (!isNaN(inputFrame)) {
    jumpToFrame(inputFrame);
  }
});

注意事项 #

• 可变帧率（VFR）误差：部分YouTube视频采用可变帧率，换算出的帧号可能和播放器实际显示的帧号有细微偏差，长视频尤为明显。
• 帧率准确性：Data API返回的是视频平均帧率，无法做到逐帧完全精准，但日常使用足够。
• 播放器统计信息的帧号：播放器自带统计信息里的帧号是实时渲染的准确值，但无法通过API直接获取，DOM抓取的方式不推荐（YouTube DOM结构可能随时变化）。

内容的提问来源于stack exchange，提问作者abhi