The HTML5 web standard has opened up many new possibilities for developing rich, interactive content and animations. HTML5 provides support for video and audio playback as well as drawing and graphics on the canvas.
In this article, I explain how video works in HTML5 and show you how to implement it in your web projects (see Figure 1).
Before you get started:
I also discuss adding HTML5 video to projects built with Adobe Muse, so you may want to install it as well.
HTML5 introduced the
<audio> tags to the HTML document object model (DOM). These tags enable you to easily add video or audio to your web page directly in HTML. All browsers and devices that implement the standard provide the video player and control interface, so all you have to do is specify the paths to the videos and which options to use.
Beyond ease of use, HTML5 video can be seen on devices and screens that do not support Adobe Flash Player (Apple iPad and iPhone devices, for example, as well as the newer Google Android devices). As more people are using devices other than desktop computers to browse the Internet, the need to move toward web standard technologies is increasingly important.
The video tag embeds video directly in the HTML DOM without the need for a plug-in such as Flash Player. The video tag is simple to use and provides a range of options, including support for preloading, auto-playing, adding a poster image, and showing browser-specific controls. You can combine nested
In years past, the infiltration of Flash Player across browsers and its extensive set of rich media features made it an ideal solution for web video. Currently, it provides several high-end features that are not available in HTML5 video. However as more people access the Internet on devices that do not support Flash video players, it makes sense that technologies shift — at least for casual video needs.
While all the major browsers support HTML5 video, the specifications for the standard are still in development. The MP4 format has been widely adopted, but it's a proprietary format with some potential licensing concerns. Internet Explorer and Safari support MP4. Firefox and Opera support the alternative formats, Ogg and WebM. Google Chrome supports all three (see Table 1). The solution for now is to produce your videos in multiple formats.
|Browser||MP4||WebM||Ogg||Internet Explorer 9||Yes||No||No||Firefox 4.0||No||Yes||Yes||Google Chrome 6||Yes||Yes||Yes||Apple Safari 5||Yes||No||No||Opera 10.6||No||Yes||Yes|
Note: For the latest compatibility information, always check the CanIUse website.
Working with the video tag is easy, even if you don't normally work with HTML. Adobe Dreamweaver CS6 is a great tool for working with HTML code. While Dreamweaver CS6 does not provide direct support for HTML5 video, the Dreamweaver team created an HTML5 Video Player widget available via the Adobe Widget Browser on Adobe Labs.
In the next series of steps, you'll explore working with the video and source tags in Dreamweaver CS6. You need to encode your video to MP4, Ogg, and WebM format before starting. You can use the video samples in the supplied files if you'd like to experiment.
Follow these steps to create a new HTML file in Dreamweaver and add video and source tags:
<video autoplay="autoplay" controls="controls" preload="auto"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> <source src="movie.webm" type="video/webm"> </video>
Follow these steps to add the HTML5 Video Player widget to Dreamweaver:
You can also apply this concept to websites built with Adobe Muse. Even though Adobe Muse is designed as a code-free solution, it's handy to know some code basics. To add an HTML5 video, simply paste the video and source tags into Adobe Muse.
Follow these steps to add an HTML5 video to an Adobe Muse website:
As you can see, using the video element in HTML5 is easy to do and is supported at some level by all the major browsers. The thing to remember is that the video is rendered by each browser or device and therefore contains the strengths and weaknesses of each browser or device. Mobile devices may limit the size of the video and some features in the specification due to optimization and performance considerations. In some cases, the browsers or devices may respond unexpectedly based on the order of the source tags or the parameters in the video tag. Be sure to test your work across browsers.
Here are a few parting tips:
<video autoplay="autoplay" controls="controls" preload="auto"> <!-- HTML5 source list: --> <source src="video/movie.mp4" type="video/mp4"> <source src="video/movie.ogv" type="video/ogg"> <source src="video/movie.webm" type="video/webm"> <!-- Fallback to Flash: --> <object width="720" height="400" type="application/x-shockwave-flash" data="flash-fallback/FlashVideoPlayer.swf"> <param name="movie" value="flash-fallback/FlashVideoPlayer.swf" /> <param name="flashvars" value="file=video/movie.mp4" /> <!-- Fallback image: --> <img src="videofail.jpg" width="720" height="400" alt="Can't load video." title="No video playback capabilities" /> </object> </video>
Dan Carr is owner, lead developer, and trainer for Dan Carr Design in San Francisco. With years of experience developing for Macromedia and Adobe, Dan has created a range of features available in Flash, including e-learning templates, UI components, and Developer Resource Kit extensions. Dan teaches Flash design and ActionScript classes in Northern California and develops e-learning and web applications for the public as well as for Adobe product teams.