Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Video Embed with HTML5
Introduction
HTML5 is coming (I promise you) but, until you can use it to turn a buck, it is well worth experimenting with.
In this tutorial I will take a brief look at the 'video for all' embed options that you can use with HTML5. This is designed to (eventually) remove the need for flash functionality when displaying a video in a web page. This is a pretty exciting prospect if you are a 'flash-doofus' like me! You will, of course, need a browser that supports this element to try out the fun and games but I'm sure that regular readers will already have a supporting browser to hand.
How it Works
The HTML for this uses a simple 'video Tag'. It is written in the same way as all other Tags in HTML;
<video>...</video>
You will need to give a source reference for the video file in the same way that you would for an image. You should also stipulate that you want users to be able to control the video with pause, play, sound on/off and a fast-forward/rewind slider. You can do this by using 'controls=true'.
Although many of the suitable web video formats have a 'poster' or still image from the movie when it is not being played, you can reference an image that you want to use fore this purpose. So, overall, my embed video code looks like this;
<video src="video/2008_Indy_500_video.ogv" controls=true poster="images/tips_images/flag.jpg"
width="320" height="240"></video>
Also, just like other HTML Tags, you can style the 'video Tag'. In my example you will notice that I have set a border, background image of a chequered flag and some padding to the video Tag. The CSS for this is;
video {
border: 5px solid #06C;
background-image: url(images/tips_images/video_embed/flag.jpg);
padding: 20px;
}
As with all new HTML5 and CSS3 developments it will be a long time before you can use this technique in a client project due to the wide use of older browsers. But you can see that the future certainly looks exciting...if a little far away.
