控制HTML5视频中的播放开始位置和播放持续时间 [英] Control start position and duration of play in HTML5 video

问题描述

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

We have a video (13 minutes long) which we would like to control using HTML5. We want to be able to let our users control and select the parts of the video they want to play. Preferably this control would be through 2 input fields. They would input start time (in seconds) in first box and input duration to play (in seconds) in second box. For example, they might want to start the video 10 seconds in and play for 15 seconds. Any suggestions or guidance on the Javascript needed to do this?

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

• 在加载时在特定位置启动HTML5视频？

• Start HTML5 video at a particular position when loading?

但它仅在特定时间开始，并且没有任何关系播放视频一段指定的时间。

But it addresses only starting at a particular time, and nothing with playing the video for a specified length of time.

推荐答案

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

You could use the timeupdate event listener.

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

Save the start time and duration time to variable after loadedmetadata event.

// 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);

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

If current time is greater than start time plus duration, pauses the video.

video.addEventListener('timeupdate', function() {
  if(this.currentTime > videoStartTime + durationTime){
    this.pause();
  }
});

这篇关于控制HTML5视频中的播放开始位置和播放持续时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！