时间戳

首页 > 解决方案 > HTML5 视频在寻求结束时如何显示最后一个视频帧？

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

问题描述

当我手动调用时：

player.currentTime = player.duration

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

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

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

目前，我必须这样做：

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

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

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

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

标签： javascriptvideohtml5-video

解决方案

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

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

TL:DR 好的老供应商问题

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

因此，目前针对此错误的解决方法是

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

推荐阅读