html - html5 video safari downloads full before playing

Question

Im wondering why my mp4 html5 video is not "streaming" and instead waits till it is fully downloaded before it starts playing in safari.

www.pija.se

I have tried QTIndexSwapper but it says the index is in the right position.

Any help appreciated.

Answer 1

looks like the MOOV atom isn't at the beginning of the file. I used ffmpeg to just relocate that (no other encoding) and then a binary compare (using HexFiend) and a quick test seemed to show that Safari was playing the video sooner

./ffmpeg -i top.mp4 -codec copy -movflags faststart top-fs.mp4

(caveat being that even though I cleared browser cache I didn't do things like bounce my test server or time things too accurately)

FWIW I find ffmpeg to be a good solution, and especially for background video you'll want to play around with parameters to optimize for your use-case