MP4 in Video.js not playing until fully loaded

Question

I'm using Video.js to play back videos in MP4 format on a client's website. The player uses html5 video and Adobe Flash Player as a fallback. (In my case it seems to use Flash always so I don't know if the problem exists in the native html5 player as well.)

The video only starts playing after the *.mp4 file is completely loaded. So no buffer for a few seconds. The file must be completely downloaded by the browser before it starts playing.

When the video is long, the visitor has to wait very long before he can even see that the video is working.

The question now is, is it the browser, the script (video.js) or the video file that creates that problem.

On the videojs.com website however the video is playing back while loading, so works properly. Therefore I think it can't be the browser.

Has anyone else had that problem? How can I fix this issue?
Any advice is very much appreciated!

Thanks

Max

Answer 1

That occurs because the moov atom of the mp4 file is on the end of the file, the player needs to know the moov atom before start playing, you can move easily the moov atom to the beginning of the file with MP4Box, there is a gui version for Windows.

In Linux command line you move the MA with: MP4Box -add my_video.mp4 my_newVideo.mp4.

This takes a few seconds.

More info:Adobe's explanation of moov atomhere

Answer 2

Are you sure that you have your tag with preload="none" because I was having the same issue and I had preload="auto". I changed it to "none", it worked great!!

My issue had nothing to do with the moov atom because I tried that too and it didn't have any effect. I even removed this converted video and it still worked with preload="none".

kjsharks

Answer 3

I use this command to add the metadata:

MP4Box -isma your-file.mp4

;)