MP4 in Video.js not playing until fully loaded
Asked Answered
K

4

9

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

Knotting answered 4/12, 2012 at 14:42 Comment(1)
Is there any relevant code you could add?Limerick
P
11

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

Peng answered 4/12, 2012 at 17:20 Comment(4)
To add to this answer, if you're on Linux and don't have MP4Box installed, you can also do this with 'qt-faststart' which comes with ffmpeg I believeGillman
More than once I've come back to this answer. Thanks again!Ayn
Quick link to download MP4Box (part of GPAC): gpac.wp.imt.fr/downloads/gpac-nightly-buildsPelota
No downvote since this seems to be the solution for some, but for me, it didn't help.Pelota
A
4

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

Alcoholize answered 12/1, 2013 at 13:58 Comment(1)
This worked for me, thank you very much. Quick tips when using video in web design. Really keep the videos short, have a nice subtle loop if necessary but preload="none" was what fixed it cross browser.Tortoise
H
1

I use this command to add the metadata:

MP4Box -isma your-file.mp4

;)

Hooligan answered 17/2, 2013 at 19:42 Comment(0)
U
0

Quoting http://docs.videojs.com/docs/guides/options.html

The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.

Ufa answered 14/3, 2013 at 9:34 Comment(1)
That link no longer exists.Buddy

© 2022 - 2024 — McMap. All rights reserved.