Tuesday, 5 February 2013

MediaElement.js loads full video before streaming


Introduction

A 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 problem

The .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 solution

How 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 solution

Another 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.

2 comments:

  1. I just wanted to thank you for your post - I used the adobe QTIndexSwapper and it resolved my issued perfectly, no more waiting for a file to download completely in flash before it starts playing. I have been working on this for a few days so to find your post was terrific. Thanks!

    ReplyDelete
    Replies
    1. Sorry for taking so long to reply but I'm very glad you found this helpful! Took me a good while to find this out the first time too!

      Delete