Question

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

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

任何帮助表示感谢。

Answer 1

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

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

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

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

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

Answer 2

我同意brianchirls。媒体片段效果很好，而且代码很少！

另一种选择是为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＆＃39;帖子。这适用于所有浏览器，但需要管理很多代码。

HTML 5视频搜索/章节

2 个答案: