HTML 5视频搜索/章节

Question

我在我的服务器上有一个很长的.m4v视频文件(~ 1小时)，但我想在我的网站上显示一个视频(HTML-5 )，它只显示它的子部分(例如，minutes 3 -> 5紧跟minutes 19 -> 20)。所以我的用户看到的视频只有5分钟长。

有没有人知道目前有什么HTML-5视频播放器或聪明的技巧可以支持这个用例？我猜我想要的功能类似于quicktime参考文件，但在HTML5 -video中，这样如果我的用户通过播放视频，他们只能看到‘子部分’，而不是之间的任何东西。

感谢您的帮助。

Answer 1

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

例如，要在10秒到20秒之间检索此视频，请使用如下url设置视频源：

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

通常，这在Internet Explorer中不起作用。

您仍然需要将多个视频片段按顺序缝合在一起。您可以在每个视频上放置一个"ended“事件侦听器来对下一个视频进行排队，也可以使用像popcorn.sequence这样的库

Answer 2

我同意布里奇尔的观点。媒体片段工作得很好，而且它的代码很少！

另一种选择是对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;
  }
});

就我记忆所及，这基本上就是brianchirls帖子中的爆米花序列。这将在所有浏览器上运行，但需要管理大量代码。