CODEWITHSUNDEEP
javascripthtmlgoogle-chromevideo-streaminghtml5-video
Eldon Lesley
Eldon Lesley

Reputation: 935

HTML Video's status becomes pending after some times

I have an HTML page with a div that contains an HTMLVideo element in it, after 10 seconds, I remove the video and all the events attached to it,

When removing the video I used jQuery .remove() on the video element. After removing the video, the div element will have no children nodes obviously.

And after a few seconds (approx 5 seconds), I initiate the video again by creating video element and all the sources and then append it to the same div. This goes in a loop.

This will work for about 5-10 minutes. After that, I notice that the video doesn't play anymore. I inspected the DOM Element in the developer tools and the video is there with the correct url.

When I checked the "Network" tab, it was still requesting the video. When the video plays, it has "GET" status with response of "206 partial content". However when it doesn't play anymore, it only responds "(pending)", and when I access the video url directly in a new tab, it takes some times to load the video if not fails. But if I access it in other browser (IE/FF) the video URL will load the video immediately.

I use Google Chrome for Windows

I don't know what's going on here, but I think it's a Chrome issue? Can someone help me?

Upvotes: 0

Views: 1470

Answers (1)

brianchirls
brianchirls

Reputation: 7853

I suspect what's happening here is that the video elements you removed are still in memory and trying to download. The browser doesn't stop buffering or even playing a video once it's no longer attached to the DOM, because you might use attach it again later or use it for other things like canvas or Web Audio API. And Chrome can only download so many streams at once before it starts blocking new ones.

To really get rid of your old video elements, you need to set the src to an empty string and then call .load(). That will force the browser to stop buffering that element, and then you can truly be done with it.

Or, you can just re-use the same video element and set the new src (or source child elements) on it the next time through the loop. Just remember to call .load() on the video element whenever you change the src.

In theory, the browser could decide to stop buffering a video element that isn't playing and has no references to it in memory and just garbage collect it. But not having seen your code, I can't say if you've got any stray references around. And Chrome can be weird about this kind of thing sometimes.

Upvotes: 1

Related Questions