HTML 5 视频搜索/章节答案

【问题标题】：HTML 5 Video seek/chaptersHTML 5 视频搜索/章节
【发布时间】：2012-08-27 11:20:18
【问题描述】：

我的服务器上有一个长的 .m4v 视频文件（约 1 小时），但我想在我的网站 (HTML-5 ) 上显示一个视频，该视频仅显示它的子部分（例如第 3 分钟 -> 5 分钟然后是第 19 分钟 -> 20)。所以我的用户看到的视频只有 5 分钟长。

是否有人知道任何当前支持此用例的 HTML-5 视频播放器或巧妙的技巧？我想我想要的功能就像 quicktime 参考文件，但在 HTML5 视频中，这样如果我的用户通过播放视频，他们只会看到“子部分”，而中间什么也看不到。

任何帮助表示赞赏。

【问题讨论】：

你不能简单地剪掉你想要的部分并创建一个文件并只显示那些分钟吗？否则，您的播放器必须在到达特定点时进行搜索。如果有帮助，请参阅stackoverflow.com/questions/9311570/html5-video-seeking-updated
谢谢！ .. 是的，我想避免制作新的较小的单独视频文件（因为会有很多这样的实例，我希望能够重新配置）.. seekToTime 函数更接近我所追求的。如果有一个播放器可以提供时间作为元数据，那就太好了。

标签： html video html5-video

【解决方案1】：

您可以使用Media Fragments URIs 告诉浏览器只向服务器请求视频文件的一部分。

例如，要从 10 秒到 20 秒检索此视频，请使用如下网址设置您的视频源：

<video src="myvideo.webm#t=10,20"></video>

像往常一样，这在 Internet Explorer 中不起作用。

您仍然需要按顺序将多个视频片段拼接在一起。您可以在每个事件上放置一个“结束”事件侦听器来排队下一个视频，或者您可以使用像 popcorn.sequence 这样的库

【讨论】：

【解决方案2】：

我同意 brinchirls 的观点。媒体片段工作得很好，而且代码太少了！

另一种选择是为 HTML5 视频标签使用很棒的内置侦听器。

您可以执行以下操作：

video = document.getElementByTagName('video')[0];
insAndOuts = [{in: 3, out: 5}, {in: 19, out: 20}];

video.addEventListener('loadeddata', function(){
  video.currentTime = insAndOuts[0].in;
});

var nextTime = function(time){
  var ends = _.map(insAndOuts, function(x){ return x.out});
  return ends.indexOf(time) + 1;
};

video.addEventListener('timeupdate', function(){
  var nextIndex = nextTime(video.currentTime)
  if(nextIndex > 0) {
    video.currentTime = insAndOuts[nextIndex].in;
  }
});

据我所知，这基本上是 brinchirls 帖子中爆米花序列的内容。这适用于所有浏览器，但需要管理大量代码。

【讨论】：