Chrome浏览器在载入网页时会挂上许多< video>标签 [英] Chrome hangs on loading page with many <video> tags

问题描述

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

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

使用firefox，我可以毫无问题地加载相同的页面。同样使用IE 11，我可以加载相同的页面，没有任何问题，并且所有视频都可以正常播放。

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

我在我的PC上使用本地apache服务器。该设置是XAMPP软件。所以Apache正在我的PC上运行，我使用本地主机访问我的页面。

现在，我发现了这个有趣的事情。当我使用file：/// C：/ URI加载页面并使用相同的确切页面时，现在Chrome显示所有视频元素都很好！他们都不是黑人。它们都显示正常，我可以毫无问题地播放它们。

这个问题仅在使用apache服务器时才会显示。所以这是网络服务器和Chrome浏览器之间的缓冲问题。

我知道这是一个缓冲问题，因为如果我将其中一个视频仍然显示为黑色，在页面顶部的链接，并重新加载页面，然后它不再是黑色，它显示出来。除了< video> 标签的位置外，没有任何变化。因此，Chrome浏览器可以在一个网页中加载多少个视频标签？我们在Windows 7上使用的是Chrome 36.0.1985.125。

b
$ b

我试图改变显示的视频大小：

  video {
 width：200px！important; 
 height：auto！important; 
} 
  

但是，无论我在上面使用什么大小，它仍然挂在同样的地方。

有什么建议做什么？我可以将网页分割成许多不同的页面。

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

 < P> 
< video width =480height =385controls> 
< source src =movie.webmtype =video / webm> 
< source src =movie.oggtype =video / ogg> 
< source src =movie.mp4type =video / mp4> 
您的浏览器不支持视频标签。 
< / video> 
< / P> 
  

正如我所说，改变宽度和高度没有任何区别。

我查看了apache（访问日志文件）的日志文件，当我从Chrome加载页面（206是部分内容）时，我在那里看到了一些206代码。以下是一个条目的示例：

  [11 / Aug / 2014：13：17：25 -0500]GET / my_notes /movie.webm HTTP / 1.1206 1768659 
http：//localhost/my_notes/index.htmMozilla / 5.0（Windows NT 6.1; WOW64）
 AppleWebKit / 537.36（KHTML，如Gecko ）Chrome / 36.0.1985.125 Safari / 537.36
  

当我从firefox加载相同的页面并查看apache日志文件，我没有在那里看到任何206代码。从 http://www.w3.org/Protocols/rfc2616/rfc2616-sec10。它说：

服务器已经完成资源的部分GET请求。
请求必须包含一个Range头域（14.35节）
表示期望的范围，并且可以包含一个If-Range头域
域（14.27节）来使请求有条件。

因此，Chrome听起来有限制它可以请求的视频。这是Chrome的一个已知问题吗？

解决方案

我发现了一个绕过Chrome浏览器问题的解决方案。

替换所有

 <视频控制> ....< /视频> 
  

with

 < video preload =nonecontrols poster =screen_shot.png> 
  

以上建议浏览器不要下载视频，除非点击播放按钮，那么只有该特定的视频被加载。它同时放置一张海报图片，以便该空间被某些东西占用，而不是空的。

现在，网页在Chrome中正常加载。

Chrome有一个创建多个套接字连接并且不关闭它的已知错误。
https://code.google.com/p/chromium / issues / detail？id = 234779

I have a page with many <video> elements in it arranged one after the other.

Lets says 100 for now. When I click on the web page, Chrome loads the first 25 and I can see the video images displayed Ok, but then it stops and the rest remain black. I also see the page is still loading, and I see chrome saying "In progress..." on the lower left side of the page.

Using firefox, I can load the same page with no problem. Also using IE 11, I can load the same page with no problem and all videos show fine.

In none of these cases I actually played the video yet. This is all just waiting for the page to fully load.

I am using local apache server on my PC. The setup is XAMPP software. So Apache is running on my PC, and I access my page using localhost.

Now here is the interesting thing I found. When I load the page using file:///C:/ URI, and use the same exact page, then now Chrome shows all the video elements just fine! None of them is black. They all display fine and I can play them with no problem.

The problem only shows up when using the apache server. So it is a buffering issue between the web server and the Chrome browser.

I know it is a buffering issue since if I move one of the videos still showing black and put the link at the top of the page, and reload the page, then it is no longer black and it shows up. Nothing changed except the position of the <video> tag. So it seems Chrome has a limit of how many video tags it can load in one page?

I am using Chrome 36.0.1985.125 on windows 7.

I tried to change the size of the video displayed using:

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

But no matter what size I use in the above, it still hangs in the same place.

Any suggestions what to do? I could split the web page into many different pages as last resort.

This is windows 7, 64 bit. The video elements I use are all the same. Here is one example

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

As I said, changing the width and height makes no difference.

I looked at the log file for apache (access log file) and I see some 206 codes in there when I load the page from Chrome (206 is partial content). Here is example of one entry:

[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"

When I load the same page from firefox and look at the apache log file, I do not see any 206 codes in there. From http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html it says:

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.

So it sounds like Chrome has a limit of the video it can request? Is this a known issue with Chrome?

解决方案

I found a solution that bypass this Chrome issue. Posting here in case someone else runs into the same problem.

Replaced All the

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

with

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

What the above does is suggest to the browser not to download the videos unless one clicks on the play button, then only that specific video is loaded. It places a poster image meanwhile so that the space is occupied by something and not empty.

Now the web page loads fine in Chrome.

Chrome has a known bug creating multiple socket connections and not closing them. https://code.google.com/p/chromium/issues/detail?id=234779

这篇关于Chrome浏览器在载入网页时会挂上许多< video>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！