Craft Web Design + Development
Brendan McKeown

Hey there. I’m a front-end developer and web designer. I'm all about creating websites and web apps that look and perform flawlessly on any device using HTML, CSS, and Javascript. I enjoy utilizing libraries, frameworks and preprocessors that improve efficiency and reduce confusion.

Check out my resume.

Move MP4 Metadata to Beginning of File

I was experiencing a HTML5 video issue in Safari and IE where it took 20-30 seconds to begin playback. Both of these browsers use the x264/MP4 encoding. The video was around 15 seconds long and full 1080 HD. Chrome and Firefox, which instead use the WEBM encoding, had less than a second delay before playback started. It turns out that the MP4 metadata index (aka MOOV atom) was located at the end of the file; so Safari and IE were downloading the entire file before playing the video. To fix this issue, I re-encoded the video file using ffmpeg and passed an additional option with the -movflags flag to move the metadata to the beginning of the file.

# -crf is the quality setting, where lower is better quality
ffmpeg -i input.mp4 -c:v libx264 -crf 19 -c:a libfaac -movflags faststart output.mp4