控制 HTML5 视频中的开始位置和播放时长

Control start position and duration of play in HTML5 video

本文关键字：播放 位置 开始 HTML5 视频 控制      更新时间：2023-09-26

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

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

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

但它只解决了在特定时间开始的问题，而没有解决在指定时间内播放视频的问题。

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

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

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

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

使用 Paul Sham 提出的 JavaScript 解决方案有很多细微差别。更简单的操作过程是使用媒体片段 URI 规范。它将允许您指定要播放的较大音频或视频文件的一小部分。要使用它，只需更改您正在流式传输的文件的来源并添加#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 的浏览器中工作。

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

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

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

相关文章：