Question

我们想要使用HTML5控制视频（13分钟）。我们希望能够让用户控制并选择他们想要播放的视频部分。优选地，该控制将通过2个输入字段。他们会在第一个框中输入开始时间（以秒为单位），在第二个框中输入要播放的持续时间（以秒为单位）。例如，他们可能想要在10秒内启动视频并播放15秒。有关Javascript的任何建议或指导都需要这样做吗？

注意：我找到了以下内容：

Start HTML5 video at a particular position when loading?

但它仅在特定时间开始，而且在指定的时间内播放视频无效。

Answer 1

您可以使用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();
  }
});

Answer 2

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

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

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

Answer 3

使用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的浏览器。

Answer 4

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

SRC =＆＃34;＃video.mp4 T = 10,30＆＃34;

在IE中不起作用。如果你想支持IE，唯一的方法就是在0秒开始之后使用javascript来寻找视频。

控制HTML5视频中的播放开始位置和播放持续时间

4 个答案: