I ran into an iOS Safari bug recently where a HTML5 video would not play on a page with basic HTTP authentication enabled by Apache. If I removed the authentication, the video would play fine. However, with authentication turned on and after a successful login, the video would not play.
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.
In order to use HTML5 video and support all modern browsers, you need to serve (as of the time of writing) 2 different source encodings: mp4 and webm. The mp4 format is commonly used in desktop media, and can be easily be encoded with programs like Handbrake. The webm format is not as commonly found. I tried the free Mira video conversion software, however it doesn't allow you to tweak any settings. On the other end of the spectrum, ffmpeg is a command-line tool that gives you full control over everything (which can be a little overwhelming at first). Here's how I went about encoding my webm video file with ffmpeg.