仅从HTML5视频/音频中加载元数据

Question

仅从HTML5视频/音频中加载元数据

5

首先，我想问这个问题。我无法在没有其他视频内容的情况下加载元数据。preload = "metadata" 不起作用。我在 Win Chrome 上测试，不知道它在 Safari/FF/IE/Opera 上怎么工作。因此，我无法快速加载六个或更多视频片段。Chrome 可以在类似的端口/协议/域上保留仅六个打开的连接。如果我加载了超过六个视频，则最后一个视频在前六个视频完全完成加载时不会开始加载。

需要 jsfiddle 吗？我可以创建，但我认为这不是必要的。例如，HTML：10个大小约为100MB的html5 <video>和preload = metadata 属性。JS（只使用 jQuery 清晰明了）：

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

然后在Chrome Dev Tools中打开“Network”选项卡并重新加载页面。六个视频将开始加载，并且会完全加载内容，而其他四个视频将带有“(pending)”标记等待。首先，在控制台中将出现6条消息。在完全加载任何第一个视频后，将出现新消息。我尝试了很多方法，但每个都失败了。现在我考虑在服务器端获取元数据。也许在PHP上有解决方案吗？但JS的解决方案可能更好。我还知道使用YouTube、Vimeo和一些其他网站的解决方案。将视频保留在一些子域(s1.youtube.com，s2.youtube.com等)中。但我不能使用它。我制作了一个网站模板，它有一些要求。我有一个视频库，其中有很多视频。播放器必须在第一个视频播放之前显示持续时间并了解宽度/高度。此外，我想从视频中间取出画面作为视频海报。停止视频加载并关闭连接的任何解决方案都是我需要的最佳选择。这确实解决了获取元数据的问题。

- Novelist

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Juddus · 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 的魔法来使其工作。在此处可以查看相关建议。

- Simon_Weaver · Answer 2

现在的情况将会更糟，因为v42（目前是beta版 - 希望能够修复）

它现在尊重preload='metadata'，但不会释放连接回池中，所以在加载6个视频后，它就完全卡住了！

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