Chrome会在加载页面上挂起许多

I have a page with many 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.

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

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.

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

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.

我在我的电脑上使用本地apache服务器。设置是XAMPP软件。所以Apache在我的电脑上运行，我使用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.

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

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

使用apache服务器时，只会出现此问题。因此，它是Web服务器和Chrome浏览器之间的缓冲问题。

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

我在Windows 7上使用Chrome 36.0.1985.125。

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

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

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:

我查看了日志文件中的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"

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:

当我从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.

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

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

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

2 个解决方案