Let’s talk about the HTML5 video tag
With HTML5 being supported by more and more browsers it means the <video> tag is getting some real broad support! Which is good because it doesn’t force you to install a plugin on your system.
In my opinion that’s just great! It will make life better for every web designer out there. Or not? Due to heavily fighting over video standards it still needs different types of implementation per browser. Google and FireFox are going for the WebM and Ogg Theora codecs, while IE and Safari want to have the H.264 standard implemented.
Nobody will win this fight most likely, so it’s wise to do a little more work and encode video’s with different codec settings and add different options to the video tag.
How to implement the video tag
Having explained why the <video> tag rocks, it’s time to show you guys how to use it within your HTML code. It’s pretty simple I might say.
<source src=”video.mp4” type=”video/mp4”>
<source src=”video.ogv” type=”video/ogg”>
Sorry, you’re not running an up to date browser
Pretty easy isn’t it? This is not everything that’s possible. There’s some more too it as you can read here. I won’t explain them all. I’ll only keep it to basic options.
If you want to add controls to your video you need to add the bottom part within the starting <video> tag.
Autoplay your video? That’s possible too! You need to add the following code to the starting <video> tag again.
It’s also possible to buffer your video. Then add the code below to your <video> tag.
For other functionalities I would advise you to read this article I also mentioned above.
How to style it with CSS
Now that you know how to add a video with HTML5, it’s time to style it with CSS. Yes, you can style it with CSS because its HTML and not a plugin like Flash or Silverlight.
Styling works similar to other items you would style with CSS. The <video> tag is a block-element so it will support padding, margins, borders, backgrounds and more.
So having said that the styling could be like this:
border: 1px #222222 dotted;
padding: 10px 5px 0px 5px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
This would result in a dotted rounded corner box wherein the video itself would reside. The box would also feature a need drop shadow effect! You can find more about drop shadow with CSS3 here.
These new features will be implemented more and more, including the <video> tag HTML5 let’s us use. Therefor I advise people to upgrade there browsers to their latest version. You just don’t want to miss out on this cool stuff!