Home / Articles / Adobe Dreamweaver / Presenting HTML5 Video with Dreamweaver CS5

Presenting HTML5 Video with Dreamweaver CS5

Article Description

Want to present video in your Dreamweaver-built website, but not sure you want to use Flash video? David Karlins, author of Adobe Creative Suite 5 Web Premium How-Tos: Essential Techniques, has the solution. This tutorial shows you in easy-to-follow steps how to work with Dreamweaver in your site to implement HTML5 video that will work with many browsers.
Providing Alternative Video for Non-HTML5 Environments

Providing Alternative Video for Non-HTML5 Environments

The upcoming release of Internet Explorer 9 will likely include HTML5 video support. But the current version of Internet Explorer doesn't support HTML5 at all, and a lot of people are still watching online video in older versions of Internet Explorer—IE 8, 7, and 6. So it's important to include alternative access to online video that doesn't require HTML5 support.

To support browsing environments that don't interpret HTML5, simply add a line of text that provides a link to your video file. That link will open the video file in a browser window, using whatever plug-in player the visitor has installed (Windows Media Player, QuickTime Player, and so on).

To add text that will display in browsers without HTML5 support, you just type that line of text after all the Video element parameters. Then that text can be formatted (and links defined) right in the friendly Dreamweaver CS5 Design window. Here's how:

  1. In the code section of the Split mode window, place your cursor just before the </video> code that closes the Video element, and type a closing angle bracket (>).
  2. Now type anything you want to use for your message. For example:
  3. Click here to watch the video
  4. Click in the Design window to update the preview. The text you typed displays in the Design window (with Live View off), and will display in browsers that don't support HTML5.
  5. Use the Property inspector to attach a link to the video file from the text you just added, as shown in Figure 4.
  6. Figure 4 A link to the video file for non-HTML5 browsers.

The link only displays in browsers that don't support HTML5, and provides complete access to the video file in any browsing environment.

8. Troubleshooting Support for Firefox | Next Section Previous Section