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

javascript html5-video

2022-08-30 05:19:24

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

当页面加载时，它只是从头开始播放。但是，如果我在播放期间调用它，就像一段时间后一样，它可以正常工作。我错过了什么吗？

答案 1

您必须等到浏览器知道视频的持续时间，然后才能查找特定时间。所以，我想你想等待'loadedmetadata'事件，如下所示：

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

答案 2

不使用 JAVASCRIPT

只需添加到媒体 URL 的末尾即可。唯一的挫折（如果你想以这种方式看到它）是你需要知道你的视频有多长，以指示结束时间。例：#t=[(start_time), (end_time)]

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

笔记：在 IE 中不受支持