如何实现跳转到视频最后一帧并暂停的JavaScript函数？

嘿，我完全懂你遇到的坑——直接把currentTime设为视频的duration看似合理，但实际会因为两个常见问题失效：

问题根源 #

1. 视频元数据未加载：如果调用函数时视频的duration还没加载完成（返回NaN），设置currentTime根本不会生效。
2. 浏览器的时间边界处理：当你把currentTime设为完全等于duration时，很多浏览器会直接将视频重置到开头，而不是停在最后一帧——因为视频的最后一帧对应的时间是略小于duration的（比如一帧的时长差）。

修复后的代码方案 #

下面是经过验证的实现，解决了以上两个问题：

function goToLast() {
  const vid = document.getElementById("videoID");

  // 先确保视频元数据已加载，duration有效
  if (isNaN(vid.duration)) {
    // 监听元数据加载完成事件，只触发一次
    vid.addEventListener('loadedmetadata', () => jumpToEnd(vid), { once: true });
    return;
  }

  jumpToEnd(vid);
}

function jumpToEnd(vid) {
  // 减去0.1秒（可根据视频帧率调整，比如60帧用1/60≈0.017）
  const endTime = Math.max(vid.duration - 0.1, 0);
  vid.currentTime = endTime;

  // 监听时间更新，确保视频跳转到目标位置后再暂停
  const pauseAtEnd = () => {
    if (vid.currentTime >= endTime) {
      vid.pause();
      vid.removeEventListener('timeupdate', pauseAtEnd);
    }
  };
  vid.addEventListener('timeupdate', pauseAtEnd);
}

代码说明 #

• 元数据检查：先判断duration是否有效，如果无效就等loadedmetadata事件触发后再执行跳转，避免空操作。
• 时间偏移：用duration - 0.1来定位最后一帧，避开浏览器对duration边界的特殊处理。
• 异步暂停：设置currentTime是异步操作，所以通过timeupdate事件监听，确保视频确实到达目标时间后再暂停，避免暂停动作早于跳转完成。

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