7

I'm using jQuery to dynamically write <video> objects, and running videojs to init them. After I play a video, SOMETIMES when I try to play it again, it just won't play, and from that point on, even after refreshing the page, no videos will play. Each time, the <video> object renders, but the video just doesn't play. Nothing is written to the console. There don't appear to be any errors. Restarting Chrome resolves the issue, but only momentarily. After playing a few videos, the issue comes back again.

I found that closing other tabs in Chrome does indeed fix the problem, so it appears to be some kind of memory issue.

I'm running Chrome 19.0.1084.46

1
  • I have dealt with a similar issue with images. It seems that Chrome over-releases the resources. Commented May 18, 2012 at 19:37

4 Answers 4

17

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

I ask because if you have more than six video tags on a single page pointing to the same source server then you could be experiencing "connection starvation":

  • Chrome allows only six open connections to a single server (based on DNS name in the URL)
  • the html5 video tag's preload attribute default value is 'auto'
  • Chrome's auto behavior is to preload some data and leave the connection open ready to pull more data for the video

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

2
  • 1
    THANK YOU!!! This is unbelievable behavior on Chrome's part. I've been trying to track down this issues for literally MONTHS!!! Google needs to fix this.
    – cdeutsch
    Commented Jan 29, 2013 at 17:07
  • 1
    I had this exact issue and isolated it to being able to insert via the console an image to the body tag until 6 videos had been added to the page. I thought I was going crazy but then stumbled upon this post. Very clear explanation Stu.
    – mummybot
    Commented Jul 22, 2015 at 19:43
1

Stu is correct. But sometimes, in my experience, Chrome ignores the preload="none" attribute and goes ahead and opens a connection anyway. I've had much problem with this when developing a site which had many smaller videos on it. The connections blocked the rest of the content (images, custom fonts (and when custom fonts are delayed, the text does not even render)) My solution was to build an own preloader which loads the images. This made sure I could control at least when the images (which was the most crucial aspect from a design point of view) was loaded.

That solved the problem with images not showing but the problem still remained. So the best solution is to set up subdomains pointing to the same server, like: v1.server.com, v2.server.com, and so on. This means you won't have to move your files and you get the benefit from enabling browsers to have more open connections. Watch out for increased dns lookup time though.

0
1

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

The bug has been known for almost 5 years as of this writing. Feel free to visit the Chromium bug report and star the issue. Hopefully it will increase in priority for the Chrome devs.


In the meanwhile, a workaround is to use a random query parameter in your video src. For example, instead of <video src="vid.mp4">, use <video src="vid.mp4?_u=1253412">. This will break Chrome's caching mechanism and allow the same video to be streamed to two different tabs at the same time.

1
  • Bless you sir! preload='none' got me half-way there but adding a random query param should keep the support emails at bay.
    – kjs3
    Commented Sep 24, 2014 at 23:16
0

I had a similar but related issue which I can expand on slightly here.

I had 14 different small videos on a page but only 2 were available at a time. Setting preload = 'none' didn't fix the issue so I also used a data attribute to store the src, and remove the src for all videos that aren't currently being viewed.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.