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

我需要 HTML5视频开始在某一点。让我们说在时间50秒前。

我试过了,但是没有按照预期的那样工作。有什么地方我做错了吗?

密码如下:

   <video id="vid1" width="640" height="360">
<source src="file.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
<script>
document.getElementById('vid1').currentTime = 50;
</script>

当页面加载时,它从一开始就开始播放。 然而,如果我在播放期间调用这个命令,比如过了一段时间之后,它就可以正常工作了。 有什么我不知道的吗?

219412 次浏览

你必须等待,直到浏览器知道视频的持续时间之前,你可以寻找到一个特定的时间。因此,我认为您应该等待类似于下面这样的“加载元数据”事件:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
this.currentTime = 50;
}, false);

You can link directly with 媒体片段 URI, just change the filename to Webm # t = 50

举个例子

这很酷,你可以做各种各样的事情。但我不知道浏览器支持的现状。

在 Safari Mac 上的 HLS 源代码中,我需要使用 loadeddata 事件而不是元数据事件。

当使用 html5中的视频标签时,调整视频的开始和结束时间;

http://www.yoursite.com/yourfolder/yourfile.mp4#t=5,15

其中逗号的左边是以秒为单位的开始时间,逗号的右边是以秒为单位的结束时间。 drop the comma and end time to effect the start time only.

不使用 JAVASCRIPT

只需将 #t=[(start_time), (end_time)]添加到媒体 URL 的末尾。唯一的挫折(如果你想这样看的话)是你需要知道你的视频有多长才能显示结束的时间。 示例:

<video>
<source src="splash.mp4#t=10,20" type="video/mp4">
</video>

注意: IE 不支持