HTML 5 Video Formats – How It Works and What You Need To Know

Playing videos with HTML5 is a lot less painful than it used to be. The syntax is simple enough to understand and there are plenty of options to give you the freedom to load and play videos with different parameters such as looping, muting video during play, auto start and even loading a preloaded image. […]

By Joel Holtzman

H.264/Mp4

The first one, listed as H.264 in the chart, is Mpeg and is a popular file format for windows users and I.E. users that is patented and, technically, there are terms one must follow when using it for commercial purposes. To learn more, you can review a PDF file that details the terms of use.

One thing to note about this format is that if you use an Iphone to record video, it will record in H.264 format but you will have to convert it in order to display it on the web if you use HTML 5 to display the video. In order to make sure that your Iphone videos would load properly through an HTML 5 video player, you can use a conversion tool called Miro Video Converter.

OGG

The second format is Ogg/Vorbis which is a file format that does not restrict usage when using for commercial purposes and is also popular for audio files. This is a file format meant to work with the non I.E browsers is a great alternative to MPEG for those on Macintosh or using mobile devices. With that said, it is important to realize that with video, ogg format will produce slightly larger files and are not known to be as high quality (although comparable) to the quality of MP4, which is used as an industry standard in web video production.

If you need help with your Magento store, call 845-656-3000 or Contact us here »

VP8/WebM

The third format to consider is VP8 (WebM) which is a newer standard that is also royalty free and has been obtained by Google. Because of this acquisition, Google Chrome will be dropping support of MP4 shortly.

How To Convert File Types

As I mentioned earlier, you can convert Iphone videos (h.264 format) to proper HTML5 ready video format by using a tool such as Miro Video Converter. There are also other options such as Mpeg Streamclip which also acts as a tool that can help you download Youtube videos should you feel the need to. Another option, if you want to focus on delivering OGG format (Firefox, Chrome, Safari) would be FireFogg.

Please note, with FireFogg, you must have Firefox open as FireFogg is a plug-in that needs Firefox to open when you are using it. This is a solution to consider when you are focused only on delivering content in OGG format and primarily work with, and serve to those who primarily use, the Firefox browser as well as “Webkit” browsers such as Safari and Chrome.

Helpful Resources

If you would like to learn more about HTML5 video compatibility as well as the pros and cons of using these unique file formats, I recommend the following resources:

Comparison of HTML 5 Video Players

Understanding HTML 5 Video File Formats & Compatibility

HTML 5 Video Overview

Summary

While HTML 5 certainly offers exciting opportunities for sharing video across a wide range of platforms, it is important to do your homework before you dive in head first. Take the time to learn more about how this technology works and make sure you are providing content to as many people, on as many devices and browsers, as possible. The sooner you invest in learning more about HTML 5 and all of its power, the sooner your website will be able to be shared across mobile phones while making sure you provide the best level of service to all of your visitors.

Magento Development Lead