HTML5: video on a web page

Tweet

Using HTML5 in order to display a video on a web page is easy and complex at the same time.
You might wonder why I'm saying so and that's why I wrote the following short guide. We will see the syntax, advantages and disadvantages of using just HTML5 to display videos.



The syntax
Let's start from the HTML syntax:

<video width="800px" height="600px" controls="controls">
  <source src="test1.mp4" type="video/mp4">
  <source src="test2.ogg" type="video/ogg">
Your browser does not support the HTML5 video tag.
</video>

Fairly easy, isn't it? Well, maybe not...

First of all, in the video tag we can specify the width and height of our video. We can then determine if we want controls visible or hidden. After that we set the sources: in the above example we used two sources, and the user browser will use the first recognised format.
After the <source> tags, we insert a text to be shown when the browser is not supporting the video tag.
As a side note: it's better to specify the width and height of the video because the browser will reserve the appropriate space during the loading of the page.
There are other specific properties we can use. Apart from "controls", "preload" allow the download of the video immediately while "autoplay" will start the video automatically (pure evil!).

Advantages and disadvantages
As for the benefits of using HTML5 to display videos, well... you know I'm not really a great support of the new standard. Not just for the new tags or because of prejudices, but because of its compatibility.
I've spent lot of words on the subject, so I won't talk about it again. Basically, every browser is behaving differently when dealing with new HTML5 stuff. We, developers, need to consider all those possible fall backs... and that's not really fun!
Anyway, the tag syntax is surely easier than other plugins syntax. HTML5 doesn't need any plugin (free, at last!). We don't need third party web site like Youtube or Vimeo.
Before the video tag, we could insert non-streaming videos, we could use a plugin or use an external web site. Now we need just the browser support... just that?
Well... no. With HTML5 we can't use full screen videos.Video controls are very basic. We can't play DRM videos. There's no adaptive streaming (we can't control the streaming itself in any way).

Video formats and codecs
The supported video formats are three: ogg, mp4 and webM.
The three video formats use:
1) ogg = Theora video codec with Vorbis audio codec;
2) mp4 = H264 video codec and AAC audio codec;
3) webM = VP8 video code and Vorbis audio codec.
I believe you already understood the problem.
Let's try to make it easy.
ogg is supported natively by Chrome, Firefox and Opera while we need to install it on IE and Safari.
mp4 is native on IE and Safari while it is usable on Chrome and Firefox with install from Microsoft. It is not working on Opera.
webM is native on Chrome, Firefox and Opera. It can be used on IE with install and it can't be used on Safari.
Said that, it's quite difficult to determine which codec is best for our web pages. My choice would be to create three video sources and put them all: one of them will work on any supporting browser.


I hope that's enough. Now it's your turn...