HTML5 video 编程跳转至末尾时如何正常显示最后一帧？

问题根因 #

直接将currentTime设置为player.duration时，该时间点本质是视频的结束边界，不属于任何可渲染帧的时间区间，浏览器默认不会加载渲染最后一帧，因此画面不会更新。播放器自带的进度条拖动功能正常，是因为内部自动将拖动到末尾的位置校准为了最后一帧的可定位时间，而非直接使用duration。

推荐解决方案 #

方案1：使用seekable属性获取可定位的最大时间（最通用，无hack）

seekable接口返回当前视频实际支持跳转的时间范围，调用seekable.end()拿到的最大值就是最后一帧对应的可定位时间，直接设置即可触发最后一帧渲染：

// 确保视频元数据已加载后执行，比如放在loadedmetadata事件回调中
if (player.seekable.length > 0) {
  player.currentTime = player.seekable.end(player.seekable.length - 1)
}

该方案完全使用标准媒体API，没有硬编码阈值，适配所有帧率、时长的视频，性能和原生设置currentTime一致。

方案2：配合seeked事件确保帧渲染完成

如果设置后还是偶发不显示最后一帧，可以监听seeked事件确认跳转完成，不需要额外调用play/pause：

if (player.seekable.length > 0) {
  player.currentTime = player.seekable.end(player.seekable.length - 1)
  player.addEventListener('seeked', () => {
    // 此时最后一帧已完成渲染，可执行后续逻辑
  }, { once: true })
}

方案3：第三方播放器适配

如果使用Video.js、Plyr等封装播放器，直接调用官方提供的seek到末尾的封装接口即可，内部已经做了最后一帧的适配逻辑。

原临时方案的问题 #

硬编码减去0.0001的方式通用性差，不同帧率的视频最后一帧的时间区间不同，高帧率视频下该偏移量可能还是超出最后一帧的范围导致失效，同时调用play/pause会触发不必要的播放状态变更，容易干扰业务侧的播放状态监听逻辑。

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