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

IT技术 javascript html5-video
2021-01-30 06:21:41

我需要 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> 

当页面加载时,它只是从头开始播放。但是,如果我在播放过程中调用它一段时间后,它就可以正常工作。有什么我想念的吗?

5个回答

您必须等到浏览器知道视频的持续时间,然后才能搜索特定时间。所以,我认为你想等待像这样的“loadedmetadata”事件:

document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);
没关系。这是 WEBM 格式的问题。MP4 工作正常。
2021-03-17 06:21:41
这在 Safari 中不起作用。我也尝试了加载数据事件。有任何想法吗?
2021-03-25 06:21:41
使用 'durationchange' 事件并在更改播放视频之前始终调用 pause
2021-04-11 06:21:41

不使用 JAVASCRIPT

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

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

注: IE 不支持

如果您不想指定结束时间,您可以简单地添加 #t=10
2021-03-25 06:21:41
这真的不太行。浏览器仍然可以根据需要预加载,也许只是在您决定的位置开始和结束,但预加载并没有停止......
2021-04-09 06:21:41
第二个数字似乎并没有结束视频的加载量……第一个数字有效。有什么想法吗?
2021-04-10 06:21:41
这很容易成为在特定时间启动视频的最简单和最好的解决方案
2021-04-13 06:21:41

您可以直接与Media Fragments URI链接,只需将文件名更改为file.webm#t=50

这是一个例子

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

是否有设置结束时间的片段?
2021-03-23 06:21:41
@michaelhanon,为 IE 编写一个 polyfill 来实现这一点相当容易。检测浏览器,如果不支持,拆分URL,找到查询参数,使用Javascript更改视频的时间......如果有机会我可能会这样做
2021-03-27 06:21:41
浏览器支持很好。我认为所有支持 HTML5 的浏览器也至少支持基本的时间媒体片段。
2021-04-09 06:21:41
它甚至允许在点后几分之一秒:#t=17.79^_^
2021-04-13 06:21:41

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

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

其中逗号左边是以秒为单位的开始时间,逗号右边是以秒为单位的结束时间。删除逗号和结束时间以仅影响开始时间。

使用浏览器时,最好查看 W3C 规范和 caniuse.com 以了解某个功能的支持程度。(最好的 StackOverflow 答案链接到规范。)在这种情况下,它们被称为“媒体片段”,规范在这里。w3.org/TR/media-frags
2021-03-19 06:21:41
第二个数字似乎并没有结束视频的加载量……第一个数字有效。有什么想法吗?
2021-03-28 06:21:41

在用于 HLS 源的 Safari Mac 上,我需要使用加载数据事件而不是元数据事件。

我认为加载元数据应该是正确的事件,但我也得到了 seekable.length 0(仅在 OSX 上的 Safari 中),除非我监听了数据加载。谢谢
2021-03-20 06:21:41
为什么这被否决了?它可能与 OP 提供的示例没有直接关系,但它实际上是准确的,并且与问题的一般主题相关。
2021-04-12 06:21:41