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

12
votes

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:

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

2
htmlgoogle-chromehtml5-video
You should make sure that your video file is encoded in H.264. Only then, the video will start playing before it's fully loaded. If your video is encoded in, for example, MPEG-4, it may cause the loading issue. I advice you to check out this link: longtailvideo.com/support/forums/jw-player/bug-reports/20252/… – user2793161

2 Answers

12
votes

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

4
votes

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

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 get streamed!