13

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

shackleton
  • 701
  • 1
  • 12
  • 27
  • 3
    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: http://www.longtailvideo.com/support/forums/jw-player/bug-reports/20252/videos-only-play-after-they-have-completely-loaded/ – user2793161 Apr 08 '14 at 16:35

2 Answers2

16

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

Jamie Birch
  • 5,839
  • 1
  • 46
  • 60
5

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!

ashleedawg
  • 20,365
  • 9
  • 72
  • 105
Foaster
  • 658
  • 5
  • 13
  • 2
    Solution is an off-site link to a `.exe` and thus: **1)** may be lost due to link rot one day; **2)** would only ever work on Windows; and **3)** is a complete black-box. See below for a simple OS-independent, open-source method of moving the metadata block yourself. – Jamie Birch Mar 21 '18 at 15:05
  • @JamieBirch : 1) Your solution has even more external links 2) good point didn't think of that 3) Just no... the linked page pretty clearly states what and how it works... But yes, in the end ffmpeg is the better solution. Just neither the easiest nor the fastest for people who don't know their Terminal ;) – Foaster Jul 11 '18 at 12:37
  • amazingly easy solution. tried the metadata-mover. works like magic with handbrake video converter. +1 – Galzor Oct 07 '19 at 06:20