Getting started with video and audio in HTML5

Welcome again to my site, this is my first tutorial on this website and I hope that some of you will find this useful.In this tutorial I will tell you the basic stuff that you need to know before trying the new features in HTML5.

Why I chose my first tutorial to be about HTML5?

I think that HTML5 is the future, and all programmers need to have a clue about how this works. If you are new in this kind of aria (programing), don’t worry, HTML5 is very simple and I’ll try to explain everything.

 1. Prepare your server!

Before starting making some changes on your webpage, you need to know that your  .htaccess file need to suport some modifications. This is because your server need to recognize the type of the files that we will use later. So, for the moment just edit your  .htaccess file or if your server does not have such a file, create a file and name it  –.htaccess– . Then, copy this code  into it, after that place the file in the root folder from your server.

AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm

2. Embedding video and audio

Now we are at the most exciting  part, about how we implement video and audio in html5. Actually is very simple, with just a tag the video elements will be up on your site. The same thing applies for audio to.  Let’s look at the code:

Video:

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

Audio:

<audio src="audio.oga" controls>
</audio>

This is the easiest way ever to embed video and audio in HTML5 as you can see you need only 2 parameters: src and controls and I think it is obvious what role they have.And now comes the tricky part , as you know or you don’t,  every browser comes with his own, audio and video player. What does this mean? Means that, every browser support only the video and audio formats that he wants.

Video Formats and Browser Support

  FireFox Chrome Opera Safari IE
Ogg Yes Yes Yes No No
Webm Yes Yes Yes No No
Mp4 No No No Yes Yes


Audio Formats and Browser Support

  Firefox Chrome Opera Safari IE
Ogg Yes Yes Yes No No
Wav Yes Yes Yes Yes No
Mp3 No Yes No Yes Yes
AAC No Yes No Yes Yes

As you can see here is a serious battle between  the formats.

3. How we can do our video/audio “visible” on any browser?

Let’s take a look at this code and I will explain after:

 <video controls>
     <source src="video.mp4" type="video/mp4" />
     <source src="video.webm" type="video/webm" />
     <source src="video.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
 </video>

In this piece of code, I make my video visible on any browser, as you can see I deleted src parameter and I added a new tag called source. And, the way it works, is very simple : You go with your browser on my webpage, where I have a video that is embedded with HTML5. So, the browser checks the first line , if he can’t show this format, he will skip to the second line, and so on. Finally, if the browser does not support HTML5, he will show the message: “Your browser does not support HTML5 video”.
The order of formats is not random,the .mp4 format is first, because the iOS devices don’t seek more than the first line. So, if they find .webm or .ogv in the first line, IPhone or IPad etc. they will not play the video. Because of that, .mp4 format goes first. The second one is .webm because is better than the other, and finally the .ogv format.

 <audio controls>
     <source src="audio.m4a" type="audio/mp4" />
     <source src="audio.oga" type="audio/ogg" />
     <p>Your browser does not support HTML5 audio.</p>
</audio>

It’s clearly that the same thing applies for audio. You see that the first format is the .m4a, because of the iOS bug.
And now our video and audio files are viewable in any browsers that supports HTML5.

4. Autoplay, Looping, Poster Frame, Properties

Those are the basics properties that I’ll show you today, you will be surprise when you will see how simple is to implement.
For autoplay just add a new parameter like that:

<video controls autoplay>
     <source src="video.mp4" type="video/mp4" />
     <source src="video.webm" type="video/webm" />
     <source src="video.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
 </video>

And for audio:

 <audio controls autoplay>
     <source src="audio.m4a" type="audio/mp4" />
     <source src="audio.oga" type="audio/ogg" />
     <p>Your browser does not support HTML5 audio.</p>
</audio>

If you want to loop your video or audio file is the same thing, instead of autoplay add loop. But you need to know that Firefox does not support this loop parameter, if you want to make your loop visible in FF you need to make it manual.
Next one is the poster frame, this is again very simple to add:

<video controls poster="poster.jpg">
     <source src="video.mp4" type="video/mp4" />
     <source src="video.webm" type="video/webm" />
     <source src="video.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
 </video>

And finally some video properties like height and weight:

<video width="680" height="480" controls poster="poster.jpg">
     <source src="video.mp4" type="video/mp4" />
     <source src="video.webm" type="video/webm" />
     <source src="video.ogv" type="video/ogg" />
     <p>Your browser does not support HTML5 video.</p>
</video>

As you can see everything is very simple, but of course this is only the basic stuff, please tell me, if you want some ‘deeper’ information about HTML5. But anyway, I will make another tutorial more advanced, for people who already know this stuff.
Please comment and tell me what you think, and if you have any questions feel free to ask.

Comments (1)
  1. Glenna Delellis April 5, 2012

Leave a Reply

Your email address will not be published. Required fields are marked *


*

WordPress SEO