Digging into HTML5 Video

Written by Kevin Liew on 14 Jun 2013
16,850 Views • Web Development

HTML5 moves the web into a new era. It introduced so many new elements and attributes that would make the web more semantic. Among them, HTML video element supports native playback in all current browsers. This eliminates the needs of Flash plugin.

Most importantly, all mobile platforms such as iOS and Android are using HTML5 video for video playback. With the number of mobile users, you don't want to miss that this pool of audiences.

However, you need to know a few things about HTML5 video. To make HTML5 video supported in most modern browsers, we need to convert the video into 3 different video formats:

  • WebM: An open video format for web created by Google. It's now supported by Mozilla, Opera, Chrome and IE9+. Read more
  • OGG: A free and open container format by Xiph.Org foundation. It uses Theora encoding and can be saved as .ogg or .ogv file extension.
  • MP4: MPEG-4 file type has been available for quite a while. Usually, MP4 is encoded in H.264, this will enable playback in third party flash player. This will eliminate the needs of FLV conversion.

Luckily, there are a few useful tools out there to assist you. You don't have to worry about video formats, browser support or even HTML5 coding for some tools listed below. For example, Easy HTML5 Video does the conversions and also output everything you need to make a cross browser HTML5 video player.

Easy HTML5 Video

Easy HTML5 Video is an All-In-One solution. It covers from video conversion to HTML output and file upload. It has a free wizard program that help you create HTML5 video for your website in a few clicks. You can choose a few options such as video conversion, browser support and setting for the HTML code. It will create a fallback flash version of your video for legacy browsers. Available in Windows and Mac.

Miro

A beautiful, simple way to convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and iPad. Batch conversion, custom sizing, and more! Available in Mac, Windows and Linux.

Freemake

Convert video free to AVI, MP4, WMV, MKV, 3GP, DVD, MP3, iPad, iPhone, PSP, Android phones. Video to MP3 with one click! Rip & burn DVD. Convert YouTube to MP4, AVI, etc. with Freemake! Guaranteed result. It doesn't generate HTML code. Available in Windows Only.

Handbrake

HandBrake is a free and open source tool for converting video from nearly any format to a selection of modern, widely supported codecs. Available in multi-platform (Windows, Mac and Linux)

Manual Solutions

You might want to do it yourself to learn all the coding and video conversion. Here we found a few good resouces to get you started.

HTML5 videos thing you need to know

This article give you a good introduction plus some tools for

Quickly converting to HTML5 video

This guide is intended specifically for the Mac OS X operating system. Most of this guide should translate to any Linux based system but not Windows. A pretty hardcore tutorial, if you not a fan of command line, skip this.

Encode videos for the web

Another HTML5 video walkthrough. It also listed some tools and also its premium solution.

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.