One would think after all these years encoding video for web playback would actually be more simple than it was in the 90’s. Sadly, it’s more complex than ever. Even though Google will be removing H.264 support in Chrome, it does still support H.264. So for now it can be used for both iOS and Android apps.
That said, there are many ways to encode H.264 video. Even if you use traditional encoding methods and stick to common tools like QuickTime 7 Pro, Adobe Media Encoder, Compressor… you will quickly notice creating one H.264 file that works in both iOS and Android is not very easy.
If you use QuickTime X and export for the iPhone – something that seems obvious – the file extension will end in .m4v which may cause playback issues in web browsers and non-iOS devices.
Go ahead and use that Save As… iPhone option from QuickTime X. Then change the file extension to .mp4.
If you need something to help you embed the video in a webpage and help with delivering the right format to the right browser (egg Ogg to Firefox and Flash to IE8), give VideoJS a try.