Working with HTML5 video in web projects

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:

1. Download the project files (ZIP, 9 MB) to use as a reference.
2. Download the free trial of Adobe Dreamweaver CS6 and install the application if you haven't already done so. You can also use your Creative Cloud membership to download and install the product.

I also discuss adding HTML5 video to projects built with Adobe Muse, so you may want to install it as well.

HTML5 introduced the <video> and <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 <source> tags to specify different video formats to target different browser requirements and add HTML to handle fallback solutions if HTML5 is not supported. The video tag also exposes itself to JavaScript so it can be extended and customized.

Web standard technologies have evolved to include accessible rich media through the use of HTML5, JavaScript, and CSS3. HTML5 provides the video, audio, and canvas tags to include media and drawing capabilities directly in the browser. CSS3 provides new levels of support for drawing, animation, and effects. JavaScript provides a runtime language that can dynamically manipulate HTML5 and CSS3.

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.

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:

1. Open Dreamweaver and create a new HTML file.
2. Switch to Code view or Split view.
3. Add the following code inside the <body></body> tags:

4. Notice that the video tag specifies three parameters that preload the video when the page loads, auto-play the video when ready, and show the browser's native controls. Nested between the open and close video tags are three source tags. The source tags define the MP4 video source, the Ogg video source, and the WebM video source. The browser chooses the source it can support. Note that the MIME type must be included for full support across browsers, and the MP4 type should come first to support iPad.
5. Save the file next to your videos or in the location of your choice.
6. Update the src attribute in the source tags with the path to your videos.
7. Choose File > Preview in Browser to preview the file in a browser (see Figure 2).

You can take the concept further by installing the HTML5 Video Player widget in Dreamweaver. The Video Player widget injects the Kaltura HTML5 Media Library into your file to provide extended support for the video tag. Kaltura provides a fallback to Flash Player for any browser that does not support HTML5. It also uses a customizable set of control skins built into HTML, CSS, and the jQuery JavaScript framework.

Follow these steps to add the HTML5 Video Player widget to Dreamweaver:

1. Open the Adobe Widget Browser or install it, if needed. The Adobe Widget Browser is an AIR application that shows available Dreamweaver widgets and manages widgets that have been downloaded and installed.
2. Click the Sign in button and enter your Adobe ID or create an Adobe account.
3. Browse for the HTML5 Video Player widget in the widgets list and click it to view its details. Click the Add To My Widgets button to download and install the widget.
4. Create a new HTML file in Dreamweaver.
5. Choose Insert > Widget and then select the Video Player widget in the Widget dialog box. Click OK to add the widget.
6. Save the file.
7. Switch to Code view. Dreamweaver has added script tags, style tags, and metadata along with the video and source tags. The related Kaltura files are also saved with the HTML file.
8. Edit the parameters in the video tag as well as the source tag. It should look similar to the code snippet from the last sample with a source tag for your MP4, Ogg, and WebM video.
9. Save the file and preview it in a browser (see Figure 3).

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:

1. Create a new Adobe Muse website or open an existing one.
2. in Plan view, double-click the page the video will appear on to edit it.
3. Choose Object > Insert HTML to open the Edit HTML dialog box.
4. Delete the default text and paste the video and source tags from the first sample into the HTML Code field. Update the src attributes in the source tags with the path from the Muse project to the video (see Figure 4). Click OK to add the code.
5. At this point, the code appears as a purple rectangle with the word "HTML" inside it. You can size the rectangle to match the video size and position it on the page.
6. Save the file and choose File > Export As HTML to preview the video in a browser.

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:

• Tip 1: The Adobe Media Encoder does not currently export video to Ogg or WebM format. You can use the Firefogg add-on for Firefox to encode video to Ogg Theora format, or you can use Miro Video Converter to encode video to WebM or Ogg Theora format.
• Tip 2: The video tag includes a range of parameters that you can use to configure the video. See the Mozilla article Using HTML5 audio and video for more information.
• Tip 3: The source tag should always include the "type" attribute with the correct MIME type value. You may need to add an .htaccess file to your server to define the MIME types as well. Check out the Video for everybody article for more tips on MIME types.
• Tip 4: You can use JavaScript to dynamically control the video element at runtime. JavaScript can access all the video parameters and commands as well as respond to events broadcast from the video during playback. You can check out the JavaScript API in w3schools.com's HTML audio/video DOM reference.
• Tip 5: You can use a Flash video player as a fallback for older browsers. The easiest way to do this is to add an object tag after the source tags. Content placed between the open and close video tags appears if the browser does not support any of the source options. In that case, the object tag would embed a Flash video player. The object tag also accepts a fallback in case the Flash player is not supported so you can show an image if video is not supported at all. The code would look like this:

• Tip 6: In some cases, the fallback code in Tip 5 might not work as expected. A more robust way to create the fallback is to use a JavaScript utility like Modernizr to evaluate the browser's capabilities and then dynamically write the video and source tags or embed the Flash video player using SWFObject.