Video element on HTML5

Jun 25, 2012
Julio Canadas

Introduction

HTML5 is introducing many new features, APIs, and elements; one of them is the video element which we’ll discuss briefly on this post.

One of the biggest issues that web pages face is that video is not natively supported by any browser; normally you will need a plug-in like Flash player to reproduce videos. This is not a big deal if you use Firefox or Internet Explorer, but what happens if you have an iPhone or an iPad? Well, you can’t access these videos… that’s why HTML5 is so important, especially with the growing demand of mobile devices like the iPhone.

The purpose of the video element is to standardize playback for video on all browsers. This is not that easy, as you might imagine… The current HTML5 draft specification does not specify which video formats browsers should support. There are lots of video formats nowadays, and it’s hard to define which one to use; it should be royalty free of course, have a good compression, high quality image and it shouldn’t kill the CPU while decoding the file.

 There are three main candidates:

-          Ogg Theora

-          H.264

-          VP8

In my opinion browsers should support as many file types as they can, but the most important thing is to standardize this on all browsers.

 

Examples

Ok, now to give you an idea how this element works:

 

               <video src="video.ogv"></video>

 

 

As you can see it’s pretty simple, and besides that basic markup you have some parameters that you could use, like controls, autoplay, etc.

I also found a couple of examples while researching this topic:

-          http://double.co.nz/video_test/test2.html

-          http://html5demos.com/video

These examples might or might not work depending on your browser. You can also find out which browser supports which file extensions here, together with some more info on HTML5 video.