With the advent of smart phones and devices, it is estimated nearly 40% of your traffic access your website from a smart device like ipad or iphone or ipod or an android phone. Encoding rightly and for the right devices is a key for a successful video on a website that can cater to any device the page is accessed or requested from.
Every video file format contains two main tracks. A video track and an audio track. When a video is encoded or converted from one format to another, a software library called a codec transforms both the video and audio tracks to a new format based on some encoding settings. The codec is a part of the actual encoding software (think of the codec as an engine) and the encoding software as the car.
Previously when the entire traffic came from computers or laptops and there were no smart devices around, the universal video format for web was FLV. FLV files were generated through either of the two video codecs. Sorenson H.263 or On2 Vp6. The audio track in a FLV file was primarily a Mp3 track.
After 2009, Flash player started supporting the Mp4 video format including the variations (f4v, m4v). A Mp4 video file consists of the video codec H.264 and the Audio codec AAC. The quality to file size ratio is better than a FLV if encoded rightly and this format is also supported today by a hosts of devices like ipads, iphones, ipods, Android phones and tablets.
However, not all Mp4 files play on the iOS devices, as iOS is very strict on the file format and more specifically how the file was encoded. We have experienced users who had tons of mp4 files but none streamed on any iOS devices till they used another encoder to re-encode again. We have also experienced many Mp4 files that never streamed over web as their file information was placed in the end of the file by the encoding software!
That being said, a rightly encoded Mp4 video file is what you need and your web videos will be viewable across:
- Computers. (Flash video player)
- Laptops. (Flash video player)
- iOS devices ipads, iphones, ipods. (HTML5 native video player)
- Android phones. (HTML5 native video player)
- Android tablets. (HTML5 native video player)
Though some Android devices support Flash, it is still recommended to chose HTML5 as Flash takes a considerable amount of resources for web streaming on these little devices. Additionally you can provide a download to the Mp4 file for those devices that do not support web streaming.
There is another important point to note though. What if, the user’s PC has Flash support, turned off or disabled? Essentially a fallback is needed for such a situation and for a successful fallback, you need another video format to cover the entire range of browsers. See the table below.
|Firefox 20||FLV, Mp4||WebM|
|Chrome 26||FLV, Mp4||MP4, WebM|
|Safari 6||FLV, Mp4||MP4|
|Internet Explorer 9||FLV, Mp4||MP4|
|Internet Explorer 10||FLV, Mp4||MP4|
|Opera 11.5||FLV, Mp4||WebM|
Evidently, you see, the video format WebM comes into the scene. WebM is a file format being sponsored by Google and contains of a Vp8 video codec and a Vorbis audio codec. File sizes will be 20% to 30% higher than the same quality Mp4 file.
Thus, to cover the entire range of PC browsers with Flash disabled or turned off (which is a very small percentage) you need to have two video file formats.
Mp4 and WebM.
So to summarize,
- For Pcs and Laptops with Flash turned on – Mp4 plays via the flash video player.
- For iOS devices – Mp4 plays via the native video player.
- For Android devices – Mp4 plays via the device native video player.
- For Pcs and Laptops with Flash disabled – Mp4 for IE9, 10, Chrome plays via HTMl5 player.
- For Pcs and Laptops with Flash disabled – WebM for Firefox and Opera.
Ideally your setup should be a Flash primary video player with a Html5 fallback support if your majority viewers access your website from a computer or a laptop. You can also chose the other way that is a primary HTML5 video player with a Flash fallback if your majority viewers access your website from a smart device. So this entirely depends on your traffic and what the majority use to access your videos. You can also chose to put a device detection and serve the video accordingly. However that part is beyond the scope of this article.