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


load only metadata from html5 video/audio

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

jsfiddle需要吗?我可以创造,但我认为这是不必要的。为例。HTML: 10 html5 <video>每个约100mb和preload=metadata属性。JS(使用jQuery只是为了清晰):

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

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

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

我也知道使用Youtube的解决方案,可能是Vimeo和其他一些网站。这是保持视频在一些子域(s1.youtube.com, s2.youtube.com等)。但是我不会用它。我做了一个网站模板,它有一些要求。

我有一个视频库,里面有很多视频。玩家必须显示持续时间,并知道宽度/高度之前,第一次视频播放。此外,我想从视频中间的视频海报采取帧。停止视频加载和关闭连接的任何解决方案是最好的我需要。而且它确实解决了获取元数据的麻烦。

v42的情况会更糟(目前是beta版,希望能修复)

它现在尊重preload='metadata',但不释放连接回池,所以在6个视频加载后,它只是完全卡住了!

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

如果你想在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魔术才能使其工作。