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

Question

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

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

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

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

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

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

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

Answer 1

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

注意：如果您的视频标签中有很多来源，如下所示：

<video width="320" height="240" controls autoplay>
    <source src="vid.webm" type="video/webm">
    <source src="vid.mp4" type="video/mp4">
</video>

我认为 chrome 将默认为mp4而不是webm。您必须执行一些 jquery 魔法才能使其正常工作。可以在这里查看相关建议。