HTML5 playback issue when playing lots of html5 videos on a single page
Hi,
I've got a use case where I need to play 48 to 150 videos per page and number of pages could be from few to thousands. I use html5 for video playback.
The video tag I use is the below one: <video width="20" height="20" autobuffer controls preload="none" ><source src="MY_VIDEO_WITHOUT_EXTENSION"type='video/webm; codecs="vp8,vorbis"'></video>
I have an Apache http server serving the videos. I store the videos without the extension so I've modified the httpd.conf and added "DefaultType video/mp4" since all videos have been transcoded to mp4 with h.264/mpeg-4 with AAC audio.
I created a simple html with the above video tag repeated 46 times with each having a different source. The videos are of varying lengths from few minutes to close to an hour. I noticed that I can play the first few videos - around 15 of them. I pause each video before playing the next one. After 15 videos or so, I start seeing the loading icon and the video just won't play no matter how long I wait.
I used firebug to see what's happening and noticed that it is waiting on the GET request. I see no incoming requests on the apache server logs for those failed videos.
If i reload the page and play those videos that didn't play earlier they would play without any issue till I reach the number of videos i've selected to play around 15 or so and then the problem starts again. The problem is not with the videos since they play at one time or the other based on what videos I choose to play first. I have no other tabs open that may interfere with this.
I noticed that I do not have this problem on Google Chrome, all videos play without any issues. So, it looks like it is a firefox issue. I have the latest FF and Chrome btw.
I added "browser.cache.memory.capacity" property and set it to 1GB but it still didn't help. The memory and CPU usage on the task manager is not significant enough to be the cause of this issue. I have 32GB RAM and 6core CPU. And its not just my desktop, its several other desktops that have this issue.
Even if I remove the codecs and use type='video/mp4', it doesn't work. I've tried removing autobuffer and it behaves the same.
Any help is greatly appreciated.
Thanks -G
Modified
All Replies (2)
Sorry,
The video tag I use is the below one: <video width="20" height="20" autobuffer controls preload="none" ><source src="MY_VIDEO_WITHOUT_EXTENSION"type='video/webm; codecs="vp8,vorbis"'></video>
Even if I remove the codecs and use type='video/mp4', it doesn't work. I've tried removing autobuffer and it behaves the same.