IntroductionA few days ago I was using MediaElement.js to put a video on a website, nothing to special.
For those that don't know what MediaElement.js is, it basically turns a HTML5 video tag into a Flash player if the browser doesn't support the video tag or doesn't support the video format(s) your using. See their website for more details, it really looks quite good and is recommended by a lot of people; my first time using it though.
The problemThe .mp4 file I was using (rendered out from Adobe After Effects) loaded fine on the website but before it started playing it had to buffer the whole video, which meant quite a delay between the user clicking play and actually seeing the video. Not ideal.
So what caused this? Well I'm no video expert so can't say for certain but this is what I can gather by reading about a little, although it was really only a little bit of reading I did. It seems to be some h.264 (possibly all?) files have the index saved at the end of the file and to play a video while it's still loading it needs to be at the beginning What the index file does exactly I haven't looked into but at a guess I'd say it has information about the video and is the video equivalent of a database index.
The solutionHow did I solve this? Well with a bit of Googling about, in my situation an Adobe Air program called QTIndexSwapper which you run on your local machine, select the video file & it saves out a new file with the index moved. That's it, works really quick too.
Another solutionAnother solution which was suggested on StackOverflow but for a slightly different scenario seems to work according to replies and comments there (I've not tried it myself though).
This is for situations where a user uploads a video and you need the index moved by PHP on the server after it's uploaded rather than doing it manually yourself. There's a class hosted on Google Code called moovrelocator which does exactly this, I haven't used it personally so can't comment much on it.