在 HTML5 Video 中，如何播放长视频中的小片段？

Posted 2023-05-07

【中文标题】在 HTML5 Video 中，如何播放长视频中的小片段？

【英文标题】：In HTML5 Video , how to play a small clip from a long video?

【发布时间】：2012-04-08 09:19:49

【问题描述】：

我想从一个超过 10 分钟的长视频文件中显示一个小片段。这段视频将从 90 秒的时间偏移/搜索时间开始，持续时间为 45 秒。我怎样才能做到这一点 ？

【问题讨论】：

请注意，通过这种方式，您会将整个视频（就文件大小而言可能相当大）传输到客户的设备上。一种用户友好的方法可能已经在编辑中解决了这个问题，并提供一个仅涵盖 sn-p 的特定文件。

【参考方案1】：

html5 视频还支持Media Fragment URI 规范。这将允许您仅指定要播放的视频片段。使用它相当简单：

<source src="video.mp4#t=30,45" type="video/mp4"/>

将在 30 秒标记处开始视频并在 45 秒标记处暂停视频。

【讨论】：

请注意，我注意到 Chrome 会继续下载视频的其余部分。它会在 45 秒处暂停视频，但用户可以从该点恢复播放。如果您将此视为限制流量或切断视频其余部分的一种手段，那么这不是您的解决方案。

您需要使用视频播放器控件来防止这种情况发生。如果在视频处于 45 秒标记时按下播放按钮，您可以让视频播放器跳回到视频的 30 秒。从 src 中解析出媒体片段来实现这种功能是非常简单的。

如果这在所有主流浏览器中得到广泛支持，那么它应该是公认的答案。

浏览器支持无关紧要。这是被批准的 w3c 规范的一部分，那么它应该是技术价值的最佳答案。但是 JS 的答案（也取决于 DOM 和 JS 的浏览器实现）；是展示通过 HTML5 以编程方式访问媒体的好方法

是否可以有两个不同的段？让它播放一个然后另一个？

【参考方案2】：

菲利普布朗是对的。你可以通过js控制你的html-player来解决这个问题。例如，在这种情况下，视频将自动启动并在 00:10 到 00:40 之间播放视频文件

<video id="yourVideoplayer"   preload="auto"> //preload="auto" buffers the video if initialize. you cannot seek a video which isn t buffering already
  <source src="test.mp4" type="video/mp4" />
  <source src="test.ogv" type="video/ogg" /> 
  This browser is not compatible with HTML 5
</video>

<script type="text/javascript">
   window.onload = playVideoTeaserFrom(10,40);   //this event will call the function after page was loaded

   function playVideoTeaserFrom (startTime, endTime) 
       var videoplayer = document.getElementById("yourVideoplayer");  //get your videoplayer

       videoplayer.currentTime = starttime; //not sure if player seeks to seconds or milliseconds
       videoplayer.play();

       //call function to stop player after given intervall
       var stopVideoAfter = (endTime - startTime) * 1000;  //* 1000, because Timer is in ms
       setTimeout(function()
           videoplayer.stop();
       , stopVideoAfter);

   
 </script>

其中可能有一些错误，但我想你会明白的

【讨论】：

这个功能好像不起作用。视频通常会播放完整长度。

那是因为@longilong 将window.onload 设置为未定义，以及代码的其他问题。有明显的错误。

如果用户使用鼠标快进或快退，计时器将在与预期不同的某个时间停止。

这是一个糟糕的解决方案 - 如果用户与视频交互（例如暂停），它将完全扭曲 TO 计算。要解决此问题，您应该收听timeupdate 事件，如果vid.currentTime 不在开始到结束之间，则暂停视频

Jim S 的答案应该被标记为正确，因为它是规范的一部分，但我认为这个答案是演示编程访问的好方法，所以向你致敬！