HTML5 video 如何在结束时显示最后一帧视频？

Question

当我手动调用时：

player.currentTime = player.duration

(1) 视频currentTime跳到结尾（期望和预期）

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

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

目前，我必须这样做：

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

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

但是，这感觉有点老套，而且不如简单地设置当前时间那么快。有更好的解决方法吗？谢谢

注意：寻求结束操作必须支持代码编程代码执行（例如响应按钮单击的代码执行）。我没有使用 seek/scrub bar 内置的播放器（效果很好）。

Answer 1

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

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

TL:DR 老供应商问题

在 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，结果完全相同。

HTML5 video 如何在结束时显示最后一帧视频？

HTML5 video how do I show last video frame when seeking to end?

javascript

video

html5-video