How to get your HTML5 MP4 video file to play before being fully downloaded
A huge title to this post for sure, but it’s a relevant question and I’ve seen it asked a few times on places such as StackOverflow.
Browsers that use H.264 video (Safari, Chrome and various mobile browers) sometimes refuse to start playing the MP4 video file until it has downloaded it completely. This is obviously annoying and not what you want.
The reason it does this is because sometimes the video encoder (whatever programme was used) places the video index at the end of the video file rather than at the beginning. This interferes with progressive download as the browser doesn’t know anything about the file until it has downloaded it and read that index.
So how do you move the index to the start of the file?
Easy. Run the excellent QTIndexSwapper programme on it which will simply re-encode the file, placing the index at the beginning.
7 Responses
Pingback: Weekly HTML5 News and Inspirations – Tutorials, Tools, Resources and Freebies (V.2) | Web Designer Aid
Pingback: HTML5 News and Inspirations – Tutorials, Tools, Resources and Freebies (V.2) | WebScriptPlus.com
QTINDEXSWAPPER fixed all of the H.264 encoded .f4v files that Wirecast generated except for one. It gave me the following error. Have any idea what to do about this? The F4V Post Processor didn’t help.
Version: v2.3.1
Atom Metadata: [code: ftyp,size: 32,offset: 0]
Atom Metadata: [code: wide,size: 8,offset: 32]
Atom Metadata: [code: mdat,size: 2327433863,offset: 40]
ERROR: Error #2006
Completed Time: 0.032s
your file is over 2 GB, that might be why. Are all the files it worked on, less than 2 GB? It gave me error #2006 also on my 3.5 GB file.
I’ve come across this a few times; so downloaded it and used it. It processed my file successfully. So I’m assuming the index was at the bottom. However this still isn’t working for me. Safari 5.0.5 on a mac with OSX 10.6.8 still downloads the whole file before it will play it. The mp4 does sit on an IIS server, and is set to use these MIME types:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
But still no joy. I also noticed that safari 5.1.4 used the flash fallback instead of the HTML5 video.
The set up I’m using is VideoJS. Am I missing something?
Any help would be gratefully appreciated, thanks in advance.
Mel.
Hi Mel, one thing you could try is checking to see if compression is enabled on IIS. This can cause issues.
See Cross Browser HTML5 video running under IIS 7.5 for more details.
Hi Ian,
Thanks for your suggestion, I’ll get the back end dev to check this out tomorrow for me. I’ll let you know how I get on at least.
Cheers,