HTML5 Video; Force browser to download the entire file

Question

Not sure if anyone can really help with this, but it is worth a shot.

We have a scenario where we want the browser to download the entire video before we play it. We have managed to achieve this in FF and Chrome but we are struggling to do so in IE9/10. Is there a way to force or make the browser download the entire file?

My (simplified) markup is as follows:

<video preload>
    <source src="http://domain.com/filename.mp4" type='video/mp4' />
</video>

Things I have tried:

• Putting the moov atom at the beginning of the file
• Putting the moov atom at the end of the file (in a hope the browser would have to download the entire file to find the header)
• Forced the browser to download without byte ranges (I know this would not support iOs etc) by serving the file from a server that returns Accept-Ranges: none
• Played the file for one second and then paused it again to kick off the download (this works in Chrome & FF)

I am running out of things to try, if anyone has any suggestions or answers they would be greatly appreciated.

Cheers

Answer 1

You might consider placing the video off-screen, then playing it and waiting for it to end. To make it play faster, you could kick up playbackRate. Meanwhile, you can show some kind of placeholder in the place where the video is supposed to be, then once you've gotten the information that it's played through, reset the video and move it to that location. Instead of waiting for the video to end, you could also wait for the canplaythrough event, which might arrive sooner.

Answer 2

You may try to use HTML5Preloader Seems like it should do the trick.

Alternativly, you may try to use preload attribute as proposed here.