CODEWITHSUNDEEP
javascripthtmlvideo
fraxture
fraxture

Reputation: 5510

How do I host more than six html5 video players on a page?

I have a single page website on which I would like to host up to 14 videos using the html5 video player. The video files are all between 80 and 150mbs and I'm currently hosting them on AWS S3.

I'm running into a problem, however, which is that the players do not load well. Once I click play, they take often 10 seconds to start playing. Because of this, I tried turning on the preload function (i.e. preload="auto"), but this led to other problems. Because there are so many players on the page, some of the players stall -- I think because when a browser tries to download too many at once, some will stall.

In order to mitigate that problem, I setup a queue to preload the videos three at a time. That works, but now I've run into another problem: Chrome, at least, stalls giving a message "waiting for available socket...." I know from this that that is probably due to a limit on the maximum six websockets that can be open at once.

So now I'm truly stumped. I'm not sure how to guarantee that the videos start playing in a reasonable time (1-3 seconds) after the user hits play, and not max out the browser's limits. I'm starting to wonder if this just can't be accomplished given the limits of the html5 video player.

If anyone has any ideas about workaround, or ways in which approach could be altered it would be much appreciated.

Upvotes: 2

Views: 472

Answers (1)

Jonathon Blok
Jonathon Blok

Reputation: 749

So instead of turning preloading on, I would suggest you set preload to none

e.g: <video id="myVideo" preload="none">

Think of it this way - if you set 14 fairly large videos to all download at once, so they are available immediately for the user wants them, you'll end up with no one video actually fully loaded.

If you set them to not download at all until the user requests one (i.e. clicks the play button) then there may still be a small delay. However they'll end up downloading less overall, they'll only download the videos they actually watch and the page is much less likely to crash. This is much more considerate to the user too (think those on low bandwidth/throttled connections).

However, not all browsers respect the preload="none" option and may preload parts of the video anyway. The safest possible, but more complicated way would be to put placeholder images with fake play buttons on them, which on user click dynamically inserts a video tag to the DOM. That way you can be sure no video tag is ever loaded until it is requested.

Upvotes: 2

Related Questions