HTML5视频 - 仅播放视频的一部分

Question

有没有一种简单的方法只播放HTML5视频的特定部分？例如，在30秒的片段中，我想仅播放第5-20秒的部分。此外，UI不应该可以访问视频的其余部分（这意味着视频时间线应仅显示5-20秒的部分）。

我已经查看了一些HTML5视频播放器，但似乎没有一个支持这种功能。如果有人知道实现此功能的（好的）方法，请给我一些提示。

提前感谢！

- calle

---

我使用VideoJS播放器（http://videojs.com/）进行了一些实验，并成功地在桌面、安卓设备和iPad上运行。 - calle

基本上，我必须覆盖原始播放器的某些功能，以正确呈现控件，并通过操作视频的“timeupdate”事件来限制视频的播放时间。我必须同意@Riplikash的观点，目前实现部分播放行为的唯一可靠方法是从服务器提供可播放内容，而不是尝试从客户端进行限制。 - calle

Answer 1

尽管这个问题已经被标记为已回答，但以下内容可能会引起您和其他人的兴趣：指定播放范围。它是媒体片段API的一部分，并且目前在最新版本的Firefox、Chrome和Safari 6+中可以使用。

- Ian Devlin

---

这个答案比标记为正确的那个更有用。谢谢@Ian Devlin - gkd

该链接已失效，无法获取有关指定播放范围的信息。请注意不要改变原文意思并尽量使翻译通俗易懂。 - prendio2

@prendio2，我刚刚修复了链接。 - nachocab

它会使视频的其余部分不可用吗？对我来说，默认情况下它只播放时间范围内的视频，但我仍然可以寻找其他部分。 - Oleh Rybalchenko

我认为这个链接很相关：https://dev59.com/Kl8d5IYBdhLWcg3wkS_Y - busterroni

Answer 2

我正在尝试实现类似于“预览模式”的视频。我正在利用上述方法，通过添加事件侦听器并在currentTime（）=='x'位置暂停视频。为了防止用户简单地再次播放，currentTime侦听器不允许在时间轴中超过“x”时间的回放，因此每次用户点击播放时，它都会自动立即暂停。此外，在时间“x”处，视频容器将通过CSS变为隐藏状态，从而防止用户与视频进行交互。

- David McCarran

Answer 3

你可以在播放器中实现这个功能，只要在Player.Play()事件中启动一个计时器，并在特定的时间调用Player.stop()函数。

- Zaheer Ahmed

Answer 4

我遇到了同样的问题，但是我没有找到可以解决这个问题的方法。你可以尝试自己实现控件并使用画布来显示视频...

如果你想在IOS上实现这个功能，可能无法做到。

- Calleth 'Zion'

---

使用JavaScript，您可以播放部分时间，但UI将显示实际时间，您可以隐藏原始控件，但用户可以通过“右键单击”->“显示控件”来显示它们。我找到的最接近的方法是使用一个可以显示部分时间的播放器，JWPlayer就是这样一个播放器，它可以显示“虚假”的持续时间，但开始时间始终为0，即使您可以从其他时间点开始... - Calleth 'Zion'

Answer 5

我的想法是使用自定义控件，因为我不认为本地可用该功能。所有html5控件的功能（播放、暂停、从时间戳开始等）都可以通过javascript调用。在这种情况下，您将要编辑currentTime变量。

因此，您可能需要考虑设置自己的滑块，其中滑块的起点表示您的起始点，而终点则表示您的结束点。将视频设置为不在页面加载时播放。然后在页面加载时，有一个javascript函数将currentTime更改为您的起始点。对于停止，您可以偶尔查询currentTime。我不会使用计时器，因为像缓慢加载这样的延迟可能会使其失效。

- Riplikash

---

你无法通过HTML5视频完全限制用户查看视频的其他部分。这有点像<img>标签。它非常开放。您必须限制服务器端将提供哪些视频部分。 - Riplikash

Answer 6

是的，你可以使用媒体片段：

在媒体URL中添加#t=[开始时间][，结束时间]。例如，要播放从第5秒到第10秒的视频，请指定：

<source src="videos/example.webm#t=5,10" type="video/webm">

来源: Web.dev。

- luvejo