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

Posted 2023-05-07

【中文标题】控制 HTML5 视频中的播放开始位置和持续时间

【英文标题】：Control start position and duration of play in HTML5 video

【发布时间】：2012-06-28 02:07:34

【问题描述】：

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

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

Start HTML5 video at a particular position when loading?

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

【参考方案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();
  
);

【讨论】：

好的，我一直在努力使用 timeupdate 事件侦听器，但我还没有完全让它工作。通过阅读，我发现我需要使用加载的元数据事件侦听器来使 videoStartTime 工作。 document.getElementById('player1').addEventListener('loadedmetadata', function() var videoStartTime = 2; var durationTime = 4; this.currentTime = videoStartTime; , false); document.getElementById('player1').addEventListener('timeupdate', function() if (this.currentTime > videoStartTime + durationTime) this.pause(); , false);

抱歉上面的内联代码。我正在尝试修复它但没有成功。抱歉我是菜鸟。

@chud 你不能在 cmets 中换行。我已经更新了我的答案以包含您的更改。请检查是否正确。我确实在 loadedmetadata 事件之外设置了 videoStartTime 和 durationTime 变量，因为我认为它们需要在 timeupdate 函数的范围内才能使用它们。

哦，好的，我现在明白了。代码现在可以按照您在上面编写的方式工作。我的下一步是修改代码，用户可以使用表单中的两个框设置“durationTime”和“videoStartTime”，然后单击它们将被应用。我知道var videoStartTime = 0 和var durationTime = 0 会阻止这种情况发生。在编写了一个 html 表单后，我尝试了以下 Javascript，但没有成功：function settheVariables(form) var videoStartTime = form.time.value; video.currentTime = videoStartTime; var durationTime = form.time2.value;

@chud 你可以尝试从settheVariables() 中删除var 吗？它需要覆盖全局变量。

【参考方案2】：

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

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

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

【参考方案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 的浏览器中工作。

【讨论】：

@michaelhanon 有许多 polyfills 更不用说 IE 11 支持它们了。

@MichaelHanon 什么是 IE？ :p

【参考方案4】：

扩展到 michael hanon cmets： IE 返回 buffered.length = 0 和 seekable.length = 0。视频不播放。所以解决方案：

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

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