Chrome 在带有许多 <video> 标签的加载页面上挂起

Posted 2023-03-05

【中文标题】Chrome 在带有许多 <video> 标签的加载页面上挂起

【英文标题】：Chrome hangs on loading page with many <video> tags

【发布时间】：2014-10-04 15:40:56

【问题描述】：

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

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

使用 Firefox，我可以毫无问题地加载相同的页面。同样使用 IE 11，我可以毫无问题地加载相同的页面，并且所有视频都可以正常显示。

在这些情况下，我都没有真正播放过视频。这一切都只是在等待页面完全加载。

我在我的 PC 上使用本地 apache 服务器。设置是 XAMPP 软件。所以 Apache 在我的 PC 上运行，我使用 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   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 的已知问题吗？

【参考方案1】：

同样的问题，这是最好的解决方法

替换

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

到

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

【参考方案2】：

我找到了绕过此 Chrome 问题的解决方案。在这里发帖以防其他人遇到同样的问题。

全部替换

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

与

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

上面的做法是建议浏览器不要下载视频，除非点击播放按钮，然后只加载特定的视频。它同时放置一张海报图像，以便空间被某些东西占据而不是空的。

现在网页可以在 Chrome 中正常加载。

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