HTML5视频我如何显示最后一个视频帧时寻求结束?

Question

当我手动调用:

player.currentTime = player.duration

(1)视频currentTime跳转到结尾(期望和期望)

(2)当我点击播放时视频开始播放(希望和期望)

(3)视频没有更新显示最后一帧(不希望和意外)

当前，我必须这样做:

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

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

然而，这感觉有点粗糙，不能像简单地设置当前时间那么快。有更好的解决办法吗?由于

注意:寻求结束操作必须支持代码编程式代码执行(例如，响应按钮点击的代码执行)。我没有使用内置的搜索/擦洗条(它工作得很好)。

Answer 1

我想我找到了答案，在firefox设置中player.currentTime = player.duration触发"ended"事件，因此视频结束(在搜索栏的末尾没有间隙)。

但在铬中是不同的，在铬设置player.currentTime = player.duration不会触发"结束"事件和搜索栏有轻微的差距(我想这就是你所指的)。链接到我的测试文件。

TL:博士好老供应商的问题

设置player.currentTime = player.duration + 99999在chrome中也不会触发"结束";事件和搜索栏在末尾仍然有差距。

当前解决这个bug的方法是

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上都可以运行，结果完全相同。