Why do webkit browsers need to download the entire html5 video (mp4) before playing?

Question

HTML5 video takes quite awhile to begin playing from Chrome/Safari (latest and Chrome Canary). It appears that the entire video file needs to download before playback begins.

In Firefox 18.0.2 (HTML5) and IE 8,9,10 (Flash), the playback is almost instant.

In Chrome, I've seen the issue while using:

• chrome native player
• VideoJS http://videojs.com/
• MediaElementJS http://mediaelementjs.com/

I find that even opening a local mp4 (h264) file in Chrome takes quite awhile to load: the developer network tools show that the video is loading/pending which takes 10-15 seconds on a large file.

For reference, here is a video: http://mediaelementjs.com/

The full video file (5MB) is downloaded before playback begins. Not so bad with this small video, but quite a pain with a large file.

I have two questions:

• Does Webkit support progressive download/playback?
• If not, is there a known workaround?

Thanks

Answer 1

As Foaster said, the metadata block needs to be early in the video so that the video doesn't have to load up to it (which may entail loading in the entire video if it's placed at the end).

But you don't need some black-box .exe file from a product website to move the metadata block. Here's how to do it with just good old ffmpeg:

ffmpeg \
-i input.mp4 \
-codec copy \
-movflags faststart \
-f mp4 output.mp4

This will:

1. -i input.mp4: Take input.mp4 as input.
2. -codec copy: Copy the stream as-is (with no encode/decode step).
3. -movflags faststart: Move the metadata block to the start.
4. -f mp4 output.mp4: Format as an MP4 file and output with the name output.mp4.

Link to full ffmpeg documentation here. Installation instructions for various platforms here (a simple brew install ffmpeg is sufficient for Mac users).

Answer 2

The problem is neither the codec nor the browser...

The problem is the meta-block in your video-file!

Most browsers can only play the video when they have downloaded the metadata. Some encoding-tools put this meta-block at the end of the output-file, thus the browser has to load the whole file to "see" the metadata.

Solution:

http://rndware.info/products/metadata-mover.html (dead site) → Archived copy here

Get this little tool, open your video and let the MetaData Mover do its magic.

Doesn't take that long and your file is ready to stream!