What do you need to know about HTML5 video

HTML5 keeps on stunning the Internet community with revolutionary web features. One of the key HTML5 enhancements is the advanced video support. With a new HTML5 standard, users don’t need any special plugins to stream video in web browsers both on PC or any portable device. Still in spite of the growing popularity of HTML5 standard, most web developers and designers are reluctant to migrate to the new markup language, maybe because of the absence of a complete HTML5 specification or lack of practical information on HTML5 сoding. In this post, I’d like to take a deeper look at HTML5 video element and explain its main points in plain English.

<video> tag vs. <object> tag

The <object> tag referrs to an embedded element within a web page: audio, video, Java applet, ActiveX, PDF, or Flash. The markup for this tag is fairly cryptic. Thus, if you wanted to embed a Flash video into a web page, you had to insert the following code:

<object id=0 type="application/x-shockwave-flash" data=player_flv_maxi.swf width=420 height=240
<param name="movie" value=player_flv_maxi.swf />
<param name="wmode" value="opaque" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="autoplay" value="false" />
<param name="autoload" value="false" />
<param name="FlashVars" value="flv=Wildlife.flv&width=420&height=240&autoplay=0&autoload=0&buffer=5&buffermessage=&playercolor=464646&loadingcolor=999898&buttoncolor=ffffff&buttonovercolor=dddcdc&slidercolor=ffffff&sliderovercolor=dddcdc&showvolume=1&showfullscreen=1&playeralpha=100&title=Wildlife.flv&margin=0&buffershowbg=0" />

To play this, users can’t do without a Flash player plugin which is ndispensable for all modern browsers except Google Chrome since the player is already pre-installed in the browser. HTML5 introduces the new <video> tag which replaces the former <object> tag for Flash video embedment. The benefits of using HTML5 <video> tag are numerous. It brings not only minimalism and simplicity of video code, but also the ease of search bots to properly index your video file. Website developers can add a video to a page in the same way they would add an image, since the basic markup necessary for </video><video> in HTML5 is refreshingly simple and straightforward:

</video><video width="320" height="240" controls autoplay poster="video.jpg">
 <source src="movie.mp4" type="video/mp4" />
 <source src="movie.ogg" type="video/ogg" />
 Your browser does not support the video tag.
</video>

Such code can be easily composed even by a not tech-savvy specialist. In the simplest way the code may be reduced to:<video src="movie.mp4" controls width="320" height="480"></video>

Video Attributes

As you can see, the <video> tag is used just like any other tags in HTML. Between opening and closing tags you can place various attributes to get the video player you want. Several of the attributes are boolean (e.g. controls, loop, muted) – no value is required. So by including or omitting them, you set the value “true” or “false” respectively. HTML5 specialists also recommend inserting the following line within video tag: Video not playing? <a href="pics/video.mp4">Download the file instead.

Controls

The browsers supporting HTML5 video have the video players already built-in. All of them include a standard set of controls: Play, Pause, Seek, Volume. However, each browser provides its own look for the video player: from the minimal approach of Chrome and IE to the more elaborate controls of Firefox, Opera and Safari. If you want to keep controls the same across all browsers, or integrate the player with our website design, you can create our own controls from scratch. Here are some useful resources:

VideoJS is an HTML5 video player built with Javascript and CSS;

Sublime Video is a sleek cloud-based HTML5 video player with advanced feature set, a paidware;

Projekktor is an open source HTML5 video player built with pure JavaScript; it also uses Flash when there is no native H.264 support;

Tutorial “How to build a custom HTML5 video player with jQuery and CSS3” from Opera developers.

Video source

The <video> tag allows multiple <source> elements which can link to one and the same video in different formats, for example:

       <source src='movie.webm' type='video/webm; codecs="vp8.0, vorbis"'/>
       <source src='movie.ogv' type='video/ogg; codecs="theora, vorbis"'/>
       <source src='movie.mp4' type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/>

As you see, the source tag has two attributes, src and type. The “type” attribute specifies the MIME type and possibly a list of codecs, which helps the browser to determine whether it can decode the file. By default, the browser will use the first recognized format. All modern browsers support at least one HTML5 video format.

Browser Support

For up to date information on browser support, you can check out the YouTube HTML5 Page

Codecs

There’s a long debate on which video formats/codecs to pursue and consensus hasn’t been reached yet. As a result, in the draft of HTML5 specification any references to a particular codec were removed. Instead, the following creteria to the video codec were put forward:

it should have good compression, good image quality, and low decode processor use;

be royalty-free;

feature hardware video decoder

Three codecs were suggested for HTML5 video element: H.264, OGG Theora, and WebM VP8. Here are their advantages and disadvantages.

H.264

Pros It gives good quality video and small file sizes. It outputs excellent video both for low-bandwidth, low-CPU mobile devices and high-bandwidth, high-CPU modern PCs and everything in between. It’s free for Internet end-users. Cons The underlying compression mechanisms in H.264 are patented and adopters have to pay royalties for commercial use to a licensing consortium called MPEG-LA.

OGG Theora

Pros It’s a royalty-free codec and is not encumbered by any known patents other than the original VP3 patents, which have been licensed royalty-free. Cons Theora generates high quality videos with comparatively larger file sizes. Plus it is a lot harder to find tools to convert to OGG Theora.

WebM VP8

Pros In 2010, Google acquired On2 – the company behind VP8, and published the video codec specification as open source, and all the patents as royalty-free. Cons While Google claims that WebM has the highest video quality of all the web codecs, most independent sources find that either H.264 is slightly better or there is very little difference between the two. The problem is that it can be very difficult to find tools to encode video to WebM. Until a complete consensus on video codecs issue is reached, web developers have to convert video to all these three formats. There’s some helpful software which deal with HTML5 video preparing:

Free Video Converter 3.0 by Freemake.com is a Windows software that encodes both desktop and online video to H.264, WebM and Theora OGG, the resulted videos go together with a sample of HTML5 video embedding;

alternatively, you can receive HTML5 source files as a result of video conversion with the help of the video tools listed here.

Some webmasters also combine HTML5 <video&ht; element with Flash-based code, so that a video could be played in any browser, including old IE versions. No doubt, HTML5 video still has a lot of benefits if compared to Flash. However, it’s still debatable whether H.264, WebM and Theora OGG will remain the default video formats supported in the video element. And since the specification of HTML5 video formats depends a lot on the decisions of Apple, Microsoft and Google corporations, the future of the whole new standard seems vague but still promising.

Frequently Asked Questions (FAQs) about HTML5 Video