MP4 in Video.js not playing until fully loaded

2020-05-27 18:14发布

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

4条回答
干净又极端
2楼-- · 2020-05-27 18:21

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.

查看更多
家丑人穷心不美
3楼-- · 2020-05-27 18:24

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

查看更多
太酷不给撩
4楼-- · 2020-05-27 18:28

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

查看更多
来,给爷笑一个
5楼-- · 2020-05-27 18:29

I use this command to add the metadata:

MP4Box -isma your-file.mp4

;)

查看更多
登录 后发表回答