How to incorporate video with HTML5

Submitted by adfm

Posted Jan 15 2010 11:54 AM

One of the more controversial additions to HTML5, the video element, offers a plug-in free alternative to proprietary formats. If you would like to use the new HTML5 video element in your markup, you'll appreciate this excerpt from Christopher Schmitt's CSS Cookbook, Third Edition.

If you want to add video to HTML5, use the HTML5 video element, as shown in Figure 1.8:

<!DOCTYPE html>

<html lang="en">

 <head>

 <meta charset="utf-8">

 <title>CSS Cookbook</title>

 </head>

 <body>

 <h1>Video Example</h1>

<span class="strong"><strong><video src="html5video.ogg" width="320" height="240"</strong></span>

<span class="strong"><strong>controls poster="html5video.jpg"></strong></span>

	<span class="strong"><strong><a href="html5video.ogg">Download movie</a></strong></span>

 <span class="strong"><strong></video></strong></span>

 </body>

</html>

Figure 1.8. Video added to a web page

Discussion

You do not have to specify the width and height of the video element. If you do not set the video element with its respective attributes, the movie will play to the default values of the video file itself.

A video file might have its own poster, which is a static image that represents the video as a whole, similar to a thumbnail. However, you can override this poster by using the poster attribute. The poster image can be any file type the browser supports (e.g., GIF, JPEG, or PNG).

Note

Although the controls attribute is optional, for the sake of usability I suggest using it so as not to offend your site’s visitors.

You can place alternative text in between the video tags, including a link to download the video file, for browsers that do not recognize the video element. This method allows website visitors a method to view the content with third-party solutions other than browsers.

At the time of this writing, Safari 3.1 and later, Firefox 3.5 and later, Opera 10 beta, and Chrome 3 beta support the video element.

Learn more about this topic from CSS Cookbook, 3rd Edition.

Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from determining which aspects of CSS meet the specific needs of your site to methods for resolving differences in the way browsers display it.