HTML5 视频在寻求结束时如何显示最后一个视频帧？答案

【问题标题】：HTML5 video how do I show last video frame when seeking to end?HTML5 视频在寻求结束时如何显示最后一个视频帧？
【发布时间】：2021-10-05 12:27:53
【问题描述】：

当我手动调用时：

player.currentTime = player.duration

(1) 视频currentTime 跳转到最后（期望和预期）

（2）当我点击播放时，视频从头开始播放（期望和预期）

(3) 视频未更新以显示最后一帧（不希望的和意外的）

目前，我必须这样做：

player.currentTime = player.duration - 0.0001
player.play()

这会导致视频跳到接近结尾，然后恢复播放，然后在到达结尾时几乎立即停止，这解决了我的问题，即视频现在显示最后一帧。

但是，这感觉有点 hacky 并且不能像简单地设置当前时间那样快。有更好的解决方法吗？谢谢

注意：寻求结束操作必须支持代码程序化代码执行（例如响应按钮单击的代码执行）。我没有使用内置于搜索/擦洗栏的播放器（效果很好）。

【问题讨论】：

你是说最后看到空白/黑框吗？如果是这样，我认为视频本身存在问题。在this 示例中，我最后没有看到空白。
jsfiddle.net/xjnao5gw - 跳转到最后一帧，无需额外的.play() 或.pause()
我测试了player.currentTime = player.duration，它跳到最后一帧。似乎是视频或其他问题/
@danday74 我想我找到了答案，在 Firefox 设置中player.currentTime = player.duration 触发“结束”事件，因此视频结束（搜索栏末尾没有间隙）。但是在 chrome 中这是不同的，在 chrome 中设置 currentTime 不会调用“结束”事件并且搜索栏有轻微的间隙结束（我认为这就是你所指的）这里链接到我的jsfiddle
谢谢，请将此添加为答案，是的，您的 jsfiddle 反映了@Andreas 提到的行为，非常感谢，您的调查工作非常有帮助 - 显然是 Chrome 问题

标签： javascript video html5-video

【解决方案1】：

我想我找到了答案，在 Firefox 设置中 player.currentTime = player.duration 触发“结束”事件，因此视频结束（搜索栏结束时没有间隙）。

但是在 chrome 中这是不同的，在 chrome 中设置 player.currentTime = player.duration 不会触发“结束”事件，并且搜索栏有轻微的间隙结束（我认为这就是你所指的）。链接到我的测试jsfiddle。

TL:DR The good old vendor issue

在 chrome 中设置 player.currentTime = player.duration + 99999 也不会触发“结束”事件，并且搜索栏在结束时仍然有间隙。

所以目前针对这个错误的解决方法是

stopButton.addEventListener('click', () => {
  player.currentTime = player.duration
  player.play() // trick for chrome
})

// to verify
player.addEventListener('ended', (e) => console.log(e.target.ended ? "ended" : "not ended"))

此代码适用于 firefox 和 chrome，结果完全相同。

【讨论】：