1

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

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

任何帮助表示赞赏。

4

2 回答 2

2

您可以使用媒体片段 URI告诉浏览器仅从服务器请求视频文件的一部分。

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

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

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

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

于 2012-09-15T07:39:49.910 回答
0

我同意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 帖子中爆米花序列的内容。这适用于所有浏览器，但需要管理大量代码。

于 2015-03-11T10:16:20.693 回答