ShareThis Blog

Tuesday, 10 May 2011

Video inside the HTML5

Yes, one of the most popular and I have to say, one of the most simple new tags in HTML5. Why is it simple in my opinion? Just because there is absolutely no JavaScript involved, which means - the less JavaScript I have to use in my code, the happier I am. And I am very happy right now... :)
Anyway, let's see it in action.
To put the video inside the code use the < video > tag. Inside the <video > tag we absolutely have to put the source of the video itself, otherwise it's not gonna work.

<video>
<source src="MyVideo.ogv" type="video/ogg"/>
</video>

Or we can make it even more simple

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

Basically that's it, if you're thinking only about users of Firefox and Chrome... Because we used only the .ogv video file and this is gonna work only in the newest Firefox and Chrome browsers, that supports HTML5.
So now we will add very few lines to our code, to make it work in all major browsers.
To do that we will use the .mp4 file for IE9+ and Safari

<video>
<source src="MyVideo.ogv" type="video/ogg"/>
<source src="MyVideo.mp4" type="video/mp4"/>
<video/> 

Well now that's it.... basically....

The video will be placed into the web page or application, but... the are no controllers. How to play the video? How to pause it, how to stop it...? For that we need to put the CONTROLS

<video controls="controls">
<source src="MyVideo.ogv" type="video/ogg"/>
<source src="MyVideo.mp4" type="video/mp4"/>
<video/>

Now we have a player with our video, there are of course other things that you can add to the video tag, like TABINDEX (to start and stop the video using keyboard), AUTOPLAY (to start the video once the page is loaded automatically), LOOP (to loop, start the video again once it's finished playing) and you can also add the poster image to your video player using POSTER...

<video controls="controls" tabindex="0" autoplay="autoplay" loop="loop" poster="MyImage.jpg">
<source src="MyVideo.ogv" type="video/ogg"/>
<source src="MyVideo.mp4" type="video/mp4"/>
<video/>

Enjoy your video !!! ;)

No comments: