Chrome HTML5 Videos stop working if too many tabs are open - memory problem?

Question

I use jQuery to dynamically record <video> objects and run video games to initialize them. After I play the video, SOMETIMES, when I try to play it again, it simply won’t play, and from now on, even after refreshing the page, the video will not play. Each time, the <video> object displays, but the video simply does not play. Nothing is written to the console. It seems that there are no errors. Restarting Chrome resolves the issue, but only instantly. After playing multiple videos, the problem returns again.

I found that closing other tabs in Chrome really fixes the problem, so it seems to be a memory issue.

I am running Chrome 19.0.1084.46

Answer 1

How many total video tags do you have? What do they look like? Do they preload='none' attribute? Are all the source videos on the server?

I ask, because if more than six video tags are indicated on one page, pointing to the same source server, then you may experience a "connection starvation":

• Chrome only allows six open connections to one server (based on the DNS name in the URL).
• The default value for preloading the html5 video tag of the 'auto' tag
• Chrome’s automatic behavior is to preload some data and leave the finished connection open to pull out more data for the video.

So, with more than six video tags on one page pointing to one server, videos will not play. To resolve this issue, set the preload attribute to 'none'

Answer 2

Stu is right. But sometimes, in my experience, Chrome ignores the preload = "none" attribute and goes ahead and opens the connection anyway. I had a lot of problems with this when developing a site that had a lot of smaller videos. The connections blocked the rest of the content (images, custom fonts (and when custom fonts are delayed, the text doesn't even display). My solution was to create my own preloader that loads the images. This ensured that I could control at least when images were uploaded (which were the most important aspect in terms of design).

This solved the problem with images that were not showing, but the problem still remained. Therefore, the best solution is to configure subdomains pointing to the same server, for example: v1.server.com, v2.server.com, etc. This means that you don’t have to move files, and you benefit from including browsers in more open connections. However, watch out for longer dns lookup times.

Answer 3

There is a known bug in Chrome. It will not play the same video on multiple tabs at the same time. This is probably what you work with if you are a developer and at the same time open your page in two tabs.

The error has been written for almost 5 years. Feel free to visit the Chromium bug report and recall the problem. I hope it will be a priority for Chrome developers.

---

At the same time, a workaround is to use an arbitrary request parameter in your src video. For example, instead of <video src="vid.mp4"> use <video src="vid.mp4?_u=1253412"> . This violates the Chrome caching mechanism and allows you to simultaneously transfer the same video to two different tabs.

Answer 4

I had a similar but related issue, which I can expand a bit here.

I had 14 different small videos per page, but only 2 were available at a time. Setting preload = 'none' does not fix the problem, so I also used the data attribute to store src and removed src for all videos that are not currently being watched.