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

Question

我有一个页面，其中有许多<video>个元素依次排列。

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

使用firefox，我可以毫无问题地加载同一页面。同样使用IE 11，我可以加载同一页面，没有任何问题，所有视频都显示正常。

在这些情况中，我实际上还没播放过该视频。这只是等待页面完全加载。

我在PC上使用本地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

Answer 2

这里的问题相同，这是解决问题的最佳方法

替换

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

要

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