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.
Defining Video Display and Play Parameters

Defining Video Display and Play Parameters

The HTML5 Video controller is rather minimalist. It displays a play button, a pause button, and a mute button, as well as a scrubber (a horizontal bar with a movable thumb) that the viewer can use to fast-forward or move manually throughout the video playback. That set of controls appears only when the visitor hovers the mouse pointer over the video, or when the video begins to play.

In addition to displaying a controller, other useful HTML5 Video parameters are autoplay, loop, and preload: autoplay launches the video immediately when the page is opened. loop plays the video over and over. preload begins downloading the video when the page is opened, even before the Play button is clicked. This feature isn't necessary (or available) if you enable autoplay, but is useful when autoplay is not enabled. Preloading allows the video to play more quickly when the visitor clicks the Play button in the player.

Enabling Autoplay

To enable autoplay, place your cursor after this code:

controls="controls"

Press the spacebar to activate HTML5 code hints. Double-click autoplay to add this code:

autoplay=""

You don't need to enter anything between the quotation marks in the code (such as "true" or "false"). Simply adding the autoplay code enables autoplay.

Enabling Looping

To enable looping, place your cursor after this code:

controls="controls"

You can do this whether or not you enabled autoplay. Press the spacebar to activate HTML5 code hints. Double-click loop to add this code:

loop="loop"

Preloading the Video

To preload the video, place your cursor after this code:

controls="controls"

You can do this whether or not you enabled any other parameter(s). Press the spacebar to activate HTML5 code hints. Double-click preload and then double-click auto to add this code:

preload="auto"
7. Providing Alternative Video for Non-HTML5 Environments | Next Section Previous Section