10

我们有一个视频（13 分钟长），我们想用 HTML5 控制它。我们希望能够让我们的用户控制和选择他们想要播放的视频部分。优选地，该控制将通过2个输入字段。他们将在第一个框中输入开始时间（以秒为单位），并在第二个框中输入播放持续时间（以秒为单位）。例如，他们可能希望在 10 秒后开始播放视频并播放 15 秒。执行此操作所需的有关 Javascript 的任何建议或指导？

注意：我发现了以下内容：

但它只解决从特定时间开始的问题，而不是在指定的时间长度内播放视频。

4

4 回答 4

13

您可以使用 timeupdate 事件侦听器。

将开始时间和持续时间保存到loadedmetadata事件后的变量中。

// Set video element to variable
var video = document.getElementById('player1');

var videoStartTime = 0;
var durationTime = 0;

video.addEventListener('loadedmetadata', function() {
  videoStartTime = 2;
  durationTime = 4;
  this.currentTime = videoStartTime;
}, false);

如果当前时间大于开始时间加上持续时间，则暂停视频。

video.addEventListener('timeupdate', function() {
  if(this.currentTime > videoStartTime + durationTime){
    this.pause();
  }
});
于 2012-06-26T18:06:35.700 回答
10

如果您能够在设置视频网址时设置视频的开始时间和结束时间。您可以在 url 本身中指定开始和结束时间，例如

src="future technology_n.mp4#t=20,50"

它将从第 20 秒到第 50 秒播放。

于 2013-10-14T09:08:31.200 回答
1

使用 Paul Sham 提出的 javascript 解决方案有很多细微差别。更简单的做法是使用Media Fragment URI Spec。它将允许您指定要播放的较大音频或视频文件的一小部分。要使用它，只需更改您正在流式传输的文件的源并添加以秒为单位#t=start,end的start开始时间和以秒end为单位的结束时间。

例如：

var start = document.getElementById('startInput').value;
var end = document.getElementById('endInput').value;

document.getElementById('videoPlayer').src = 'http://www.example.com/example.ogv#t='+start+','+end;

这将更新播放器以在指定时间开始源视频并在指定时间结束。媒体片段的浏览器支持也很好，因此它应该可以在任何支持 HTML5 的浏览器中工作。

于 2013-06-07T20:43:21.570 回答
0

延伸至 michael hanon 评论：IE 返回 buffered.length = 0 和 seekable.length = 0。视频无法播放。所以解决方案：

src="video.mp4#t=10,30"

在 IE 中不起作用。如果您想支持 IE，唯一的方法是使用 javascript 从 0 秒开始搜索视频。

于 2015-10-02T11:01:43.490 回答