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

Question

我们有一个视频(13 分钟长)，我们想使用 HTML5 对其进行控制。我们希望能够让我们的用户控制和选择他们想要播放的视频部分。最好是通过 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();
  }
});