有没有一种简单的方法只播放HTML5视频的特定部分?例如,在30秒的片段中,我想仅播放第5-20秒的部分。此外,UI不应该可以访问视频的其余部分(这意味着视频时间线应仅显示5-20秒的部分)。
我已经查看了一些HTML5视频播放器,但似乎没有一个支持这种功能。如果有人知道实现此功能的(好的)方法,请给我一些提示。
提前感谢!
有没有一种简单的方法只播放HTML5视频的特定部分?例如,在30秒的片段中,我想仅播放第5-20秒的部分。此外,UI不应该可以访问视频的其余部分(这意味着视频时间线应仅显示5-20秒的部分)。
我已经查看了一些HTML5视频播放器,但似乎没有一个支持这种功能。如果有人知道实现此功能的(好的)方法,请给我一些提示。
提前感谢!
我正在尝试实现类似于“预览模式”的视频。我正在利用上述方法,通过添加事件侦听器并在currentTime()=='x'位置暂停视频。为了防止用户简单地再次播放,currentTime侦听器不允许在时间轴中超过“x”时间的回放,因此每次用户点击播放时,它都会自动立即暂停。此外,在时间“x”处,视频容器将通过CSS变为隐藏状态,从而防止用户与视频进行交互。
你可以在播放器中实现这个功能,只要在Player.Play()事件中启动一个计时器,并在特定的时间调用Player.stop()函数。
我遇到了同样的问题,但是我没有找到可以解决这个问题的方法。你可以尝试自己实现控件并使用画布来显示视频...
如果你想在IOS上实现这个功能,可能无法做到。
我的想法是使用自定义控件,因为我不认为本地可用该功能。所有html5控件的功能(播放、暂停、从时间戳开始等)都可以通过javascript调用。在这种情况下,您将要编辑currentTime变量。
因此,您可能需要考虑设置自己的滑块,其中滑块的起点表示您的起始点,而终点则表示您的结束点。将视频设置为不在页面加载时播放。然后在页面加载时,有一个javascript函数将currentTime更改为您的起始点。对于停止,您可以偶尔查询currentTime。我不会使用计时器,因为像缓慢加载这样的延迟可能会使其失效。
<source src="videos/example.webm#t=5,10" type="video/webm">
来源: Web.dev。