仅从 html5 视频/音频加载元数据

Posted 2023-05-07

【中文标题】仅从 html5 视频/音频加载元数据

【英文标题】：load only metadata from html5 video/audio

【发布时间】：2013-05-02 19:50:43

【问题描述】：

首先，我想问这个问题。如果没有任何其他视频内容，我无法加载元数据。 preload = "metadata" 不工作。我在 Win Chrome 上进行了测试，但不知道它在 Safari/FF/IE/Opera 上是如何工作的。因此，我无法快速加载六个或更多视频剪辑。 Chrome 可能会在相似的端口/协议/域中保持只有六个打开的连接。如果我加载的视频超过六个，那么最后一个视频不会开始加载，而前六个视频完全完成加载。

jsfiddle 需要吗？我可以创造，但我认为没有必要。例如。 html：10 html5 <video> 每个大约 100mb 和 preload=metadata 属性。 JS（使用 jQuery 只是为了清晰）：

$('video').on('loadedmetadata',function()
  console.log(this.duration);
).each(function(i)
  this.load();
);

然后在 Chrome 开发工具中打开“网络”选项卡并重新加载页面。六个视频将开始加载并加载完整内容，而其他四个视频将等待(pending) 标记。起初，在控制台中会出现 6 条消息。完全加载任何第一个视频后会出现新消息。

我尝试了很多东西，但每一个都失败了。现在我想在服务器端获取元数据。有没有关于 php 的解决方案？但是JS解决方案会更好。

我也知道使用 Youtube，可能是 Vimeo 和其他一些网站的解决方案。即在某些子域（s1.youtube.com、s2.youtube.com 等）上保留视频。但我不能使用它。我做网站模板，它有一些要求。

我有很多视频的视频库。播放器必须在第一次播放视频之前显示持续时间并知道宽度/高度。我也想从视频中间取帧作为视频海报。任何停止视频加载和关闭连接的解决方案都是我最需要的。它确实解决了获取元数据的问题。

【参考方案1】：

使用 v42（目前是测试版 - 所以希望会得到修复），情况现在会变得更糟

它现在尊重preload='metadata'，但不会将连接释放回池，因此在加载 6 个视频后它会完全卡住！

查看错误报告：https://code.google.com/p/chromium/issues/detail?id=468930

刚刚发布的

v42 现在“在野外”存在这个问题。已在 Google Canary 中验证希望 v43 已修复此问题

看起来这个错误今天仍然存在。它已经 4 岁了，并且拒绝死去。 preload="metadata" 在第 7 个网络请求时停止。

【参考方案2】：

如果你想在chrome中加载超过6个视频，你需要使用.webm格式。

注意：如果你的视频标签中有一堆来源，像这样：

<video   controls autoplay>
    <source src="vid.webm" type="video/webm">
    <source src="vid.mp4" type="video/mp4">
</video>

我认为 chrome 将默认为 mp4 而不是 webm。您必须做一些 jquery 魔术才能使其正常工作。 Advice on that can be seen here.

【讨论】：

为什么会这样？