Web Audio and Video Best Practices
  • General Best Practices for Working with Web Media
  • Have Fun with Design
  • Use a Player
  • Have Closed Captions (or Transcripts)
  • If you have to use Autoplay, Mute the Audio
  • Use Only One Media Element at a Time
  • Use fragmented MP4
  • Use Fallback URLs
  • Use "type" and "codec" Attributes with your Fallback URLs
  • Actually, You Should Probably Use HLS or MPEG-DASH
  • Use Fallback Urls with HLS and Dash
  • Conclusion
Powered by GitBook
On this page

Was this helpful?

Use fragmented MP4

PreviousUse Only One Media Element at a TimeNextUse Fallback URLs

Last updated 6 years ago

Was this helpful?

I’m not going into too much detail on fMP4, you can see more here.

But the basic gist is this: for most mp4s, the browser needs to download the entire file before it can begin playback, which means if it’s a long, big file, the user is going to be waiting for a while.

But there's a special form of MP4 called a "fragmented MP4" or "fMP4" which holds it's metadata at the beginning of the file instead of the end. You can create an fMP4 in ffmpeg with the following flag: -movflags +faststart or you can convert an already created MP4 using a utility like .

A fragmented MP4 can start playback with just a fraction of its data, and continue loading as it plays. A much better user experience.

Even better is to use a streaming format, HLS or MPEG-DASH, which we’ll get to in a later best practice. But that’s much more complicated, and if you don’t want to go that far, just use fMP4.

Current Elm Difficulty = Very Easy

This is part of the encoding process, these just look like standard mp4s to Elm. The only thing is you should test to make sure that fMP4’s work on the browsers you need to support. I’ve never come across a browser that doesn’t it.

QTIndexSwapper2