如何避免在同一页面重复重载HTML视频?

时间:2011-08-12 14:19:40

标签: html5 video

在同一页面中使用相同的视频两次似乎会强制进行不必要的媒体重新加载。

比较加载视频到加载图片:

<img src="image.png"/>
<img src="image.png"/>
<video src="video.webm"></video>
<video src="video.webm"></video>

根据Firefox 5网络控制台,这会加载图像一次,但视频加载两次。

我从http://www.w3.org/TR/html5/video.html#dom-media-mediagroup了解到规范的作者希望在两种情况下都能进行单次重新加载(&#34;引用相同媒体资源的多个媒体元素将共享一个网络请求&#34;),但这不会发生在我身上。

我试图使用服务器缓存参数(我使用vanilla web.py),但无济于事,我怀疑在错误的树上吠叫。我应该看一下具体的内容吗? HTML元元素?

请注意,这与同一视频拥有多个来源的常见问题相反。在这里,我担心多个视频元素具有相同的源并排播放(例如,在不同的时间点)。

7 个答案:

答案 0 :(得分:1)

如果你检查下载视频的大小,他们是否都在下载完整的视频?

在我的测试中,大多数浏览器都会下载一小块(足以显示拇指),然后在需要时下载完整的视频 - 所以我想知道你是否将它计为两次完整下载,当它实际上只有一个完整下载和部分。

我在6月份在Bruce Lawson的帮助下做了一些测试,我们发现有些浏览器的负载比我上面描述的更多。

HTML 5 Video In Real Life (Tests)

答案 1 :(得分:1)

如果你使用的是Html 5,那么你可以更好地使用Canvas。它会加载视频一次。

答案 2 :(得分:1)

这项工作:

<video id="video" class="videohtml5" width="720" height="500" controls="controls" preload="auto" poster="">  
      <source src="path(1)"  />  
      <source src="path(2)" />  
      <source src="path(3)"  />  
</video>

答案 3 :(得分:1)

我认为人们误解了这里的规范。

如果您查看规范中的示例,它们会专门讨论包含多个轨道的单个资源(文件)。这两个视频元素包含对同一文件的引用,但该文件中包含不同的轨道。然后通过媒体组同步播放两首曲目。

如果你有两个视频标签引用相同的轨道相同的文件,我不希望它们默认同步播放。我可以想象,通过在同一媒体组中指定它们可以实现这一点,因此允许两个元素使用单个连接与单个请求流。

如果这两个视频不会同步播放,那么期望浏览器在单个请求集中加载两个视频是不合理的。请注意,这是一个请求集,视频可能会在服务器上生成许多请求,因为视频或媒体会话(想想停止,暂停和重新启动)可能比服务器或客户端愿意保持打开单个连接的时间长得多。 / p>

想象一下,如果两个元素有不同的控件。您暂停第一个视频并保持第二个视频播放。过了30分钟,然后重新启动第一个视频。浏览器根本不会缓存来自服务器的超过100兆内容的内容,以允许它播放第一个视频而不向服务器发出新请求。

如果您希望使用HTTP通过单个连接发送两个离散的流内容,那么我认为这是不可能的(当前已实现)。这将是多路复用,最后我检查,HTTP服务器没有任何多路复用支持。注意,这与保持活动连接不同,其中多个内容串行地提供,多路复用描述的是并行提供的多个内容。实现这一目标的通常方法是简单地打开两个套接字,这对于客户端和服务器来说要比处理多个单个流要简单得多。

答案 4 :(得分:0)

您当然可以将视频放在缩略图中并在有人点击它们时加载它们,如果您找不到其他内容,它可能会有所帮助。

答案 5 :(得分:0)

听起来这是您正在使用的浏览器中的一个错误,因为它显然不符合W3C HTML 5规范。我建议您为该浏览器的开发人员提交错误报告,并测试此行为与其他浏览器的对比情况。

答案 6 :(得分:0)

我认为是因为您没有在您的服务器中启用 webm 或 mp4 资源缓存,可以检查您的请求标头以查看 cache-control 是否存在。