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

【问题标题】：Start HTML5 video at a particular position when loading?加载时在特定位置启动 HTML5 视频？
【发布时间】：2023-04-04 12:28:02
【问题描述】：

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

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

【问题讨论】：

什么浏览器？您是否尝试过将通话延迟几毫秒？完全加载视频元素可能需要更长的时间

标签： javascript html5-video

【解决方案1】：

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

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

【讨论】：

这在 Safari 中不起作用。我也尝试了加载数据事件。有什么想法吗？
没关系。这是 WEBM 格式的问题。 MP4 工作正常。
使用 'durationchange' 事件并在更改播放视频之前始终调用 pause

【解决方案2】：

不使用 JAVASCRIPT

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

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

注意：在 IE 中不支持

【讨论】：

第二个数字似乎并没有结束视频的加载量……第一个数字有效。有什么想法吗？
这不太好用。浏览器仍然可以根据需要预加载，也许只是在您决定的地方开始和结束，但预加载并没有停止......
如果你不想指定结束时间，你可以简单地添加#t=10
这是在特定时间启动视频的最简单和最佳的解决方案
如果您使用autoplay 和muted 属性，则其他用途都不适用于js，但这个可以正常工作。

【解决方案3】：

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

Here's an example

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

【讨论】：

浏览器支持很好。我认为所有支持 HTML5 的浏览器至少也支持基本的时间媒体片段。
@michaelhanon，为 IE 编写一个 polyfill 来实现这一点相当容易。检测浏览器，如果不支持，分解URL，找到查询参数，使用Javascript更改视频时间......如果有机会我可能会这样做
有片段可以设置END时间吗？
它甚至允许点后的几分之一秒：#t=17.79 ^_^

【解决方案4】：

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

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

逗号左边是以秒为单位的开始时间，逗号右边是以秒为单位的结束时间。去掉逗号和结束时间只影响开始时间。

【讨论】：

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

【解决方案5】：

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

【讨论】：

我认为加载的元数据应该是正确的事件，但我也得到了 seekable.length 0（仅在 OSX 上的 Safari 中），除非我听了数据加载。谢谢
为什么这被否决了？它可能与 OP 提供的示例没有直接关系，但它实际上是准确的并且与问题的一般主题相关。