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

Start HTML5 video at a particular position when loading?

本文关键字：启动 HTML5 视频 位置 定位 加载      更新时间：2023-09-26

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

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

您必须等到浏览器知道视频的持续时间，然后才能搜索特定时间。所以，我认为你想等待"加载元数据"事件

，如下所示： 
document.getElementById('vid1').addEventListener('loadedmetadata', function() {
  this.currentTime = 50;
}, false);

不使用 JAVASCRIPT

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

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

注意：在 IE 中不受支持

您可以直接链接媒体片段 URI，只需将文件名更改为 file.webm#t=50

下面是一个示例

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

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

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

其中逗号

左侧是开始时间（以秒为单位），逗号右侧是结束时间（以秒为单位）。删除逗号和结束时间以仅影响开始时间。

在 Safari Mac 上，对于 HLS 源，我需要使用 loaddata 事件而不是元数据事件。

相关文章：