Chrome会在加载页面上挂起许多<video>标记

Question

我有一个页面,其中包含许多<video>元素,一个接一个地排列.

让现在说100.当我点击网页时,Chrome会加载前25个,我可以看到显示的视频图像正常,但随后停止,其余部分保持黑色.我也看到页面仍然正在加载,我看到chrome在页面的左下方说"正在进行...".

使用firefox,我可以毫无问题地加载同一页面.同样使用IE 11,我可以加载相同的页面没有问题,所有视频显示正常.

在这些情况中,我实际上还没有播放视频.这只是等待页面完全加载.

我在我的电脑上使用本地apache服务器.设置是XAMPP软件.所以Apache在我的电脑上运行,我使用localhost访问我的页面.

现在这是我发现的有趣的事情.当我使用file:/// C:/ URI加载页面并使用相同的页面时,现在Chrome显示所有视频元素就好了!他们都不是黑人.它们都显示得很好,我可以毫无问题地播放它们.

该问题仅在使用apache服务器时显示.因此,它是Web服务器和Chrome浏览器之间的缓冲问题.

我知道这是一个缓冲问题,因为如果我移动其中一个仍显示黑色的视频并将链接放在页面顶部,然后重新加载页面,那么它就不再是黑色而且会显示出来.除<video>标签的位置外没有任何变化.那么Chrome似乎限制了一页中可以加载多少个视频标签？

我在Windows 7上使用Chrome 36.0.1985.125.

我尝试使用以下方法更改显示的视频大小:

video {
  width: 200px    !important;
  height: auto   !important;
}

但无论我在上面使用什么尺寸,它仍然挂在同一个地方.

有什么建议吗？我可以将网页拆分成许多不同的页面作为最后的手段.

这是Windows 7,64位.video我使用的元素都是一样的.这是一个例子

  <P>
  <video width="480" height="385" controls>
      <source src="movie.webm" type="video/webm"> 
      <source src="movie.ogg" type="video/ogg">
      <source src="movie.mp4" type="video/mp4"> 
       Your browser does not support the video tag.
  </video>
 </P>

正如我所说,改变宽度和高度没有区别.

我查看了日志文件中的apache(访问日志文件),当我从Chrome加载页面时,我看到了大约206个代码(206是部分内容).以下是一个条目的示例:

[11/Aug/2014:13:17:25 -0500] "GET /my_notes/movie.webm HTTP/1.1" 206 1768659 
 "http://localhost/my_notes/index.htm" "Mozilla/5.0 (Windows NT 6.1; WOW64) 
  AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36"

当我从firefox加载相同的页面并查看apache日志文件时,我看不到任何206代码.来自http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html它说:

服务器已完成对资源的部分GET请求.请求必须包含一个Range头字段(第14.35节),表示所需的范围,并且可以包含一个If-Range头字段(第14.27节)以使请求成为条件.

所以听起来Chrome有可能要求的视频限制？这是Chrome的已知问题吗？

Answer 1

我找到了一个绕过这个Chrome问题的解决方案.发布此处以防其他人遇到同样的问题.

全部取代了

  <video  controls>....</video>

同

  <video preload = "none" controls poster="screen_shot.png">

以上操作建议浏览器不要下载视频,除非单击播放按钮,然后才加载该特定视频.它同时放置一张海报图像,以便空间被某物占据而不是空洞.

现在网页在Chrome中加载很好.

Chrome有一个已知的错误,即创建多个套接字连接而不关闭它们. https://code.google.com/p/chromium/issues/detail?id=234779