html5 – Chrome挂载了许多标签的加载页面

我有一个页面有很多< video>其中的元素一个接一个地排列.

让我们现在说100.当我点击网页时,Chrome会加载前25个,我可以看到显示的视频图像很好,但是会停止,其余的仍然是黑色的.我也看到页面仍在加载,我看到chrome在页面的左下方说“进行中…”.

使用firefox,我可以加载相同的页面没有问题.另外使用IE 11,我可以加载相同的页面没有问题,所有的视频都显示正常.

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

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

现在这里是我发现的有趣的事情.当我使用file：/// C：/ URI加载页面,并使用相同的确切页面,那么现在,Chrome会显示所有的视频元素！他们都不是黑色的他们都显示正常,我可以玩没有任何问题.

问题只出现在使用apache服务器时.因此,这是网络服务器和Chrome浏览器之间的缓冲问题.

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

我在Windows 7上使用Chrome 36.0.1985.125.

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

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

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

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

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

<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说：

The server has fulfilled the partial GET request for the resource. The
request MUST have included a Range header field (section 14.35)
indicating the desired range,and MAY have included an If-Range header
field (section 14.27) to make the request conditional.

那么听起来Chrome浏览器可以要求的视频有限制？这是Chrome的已知问题吗？

解决方法

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

全部替换

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

同

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

除非有人点击播放按钮,否则浏览器不会下载视频,因此上述内容是建议的,那么只有特定的视频被加载.它同时放置一张海报图像,使空间被某物占用,而不是空的.

现在Chrome中的网页加载正常.

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

原文地址：https://www.jb51.cc/html5/168680.html

html5 – Chrome挂载了许多标签的加载页面

解决方法

相关推荐