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.
Embedding HTML5 Video

Embedding HTML5 Video

Now that you've downloaded and installed the HTML5 Pack, created an H.264 or OGG version of your video, and created a Dreamweaver CS5 website and page—it's action time!

In the following steps, you'll complete the process of embedding a video in an HTML5 web page. Unfortunately, we'll have to hop into Code view. Or, to be more specific, Split view—where the main Dreamweaver CS5 web page is divided into Code and Design views. If that's not the setup on your screen, choose View > Code and Design to work in Split view.

  1. In Split view, place your cursor after the opening <body> tag and press Enter (PC) or Return (Mac) to create a new line of code.
  2. Type <vi and then press Tab to complete the beginning of the <video tag.
  3. Press the spacebar and then double-click src.
  4. A Browse link appears, as shown in Figure 2. Double-click the Browse link to open the Select File dialog.
  5. Figure 2 Browsing for a video file.

  6. Navigate to the H.264 video file you exported from Media Encoder into your Dreamweaver site folder (or to an OGG video file you copied into that folder). Double-click that file to select it.
  7. Next, we'll add a parameter to display a controller (player) for the video. Press the spacebar and then double-click controls from the code hints. The line of code now reads as follows:
  8. <video src="xxx.mp4" controls="controls"

    where xxx is the filename of your H.264 audio file (or an OGG video file).

  9. Type </ and the HTML5 Pack will autocomplete the closing tag </video>.

Remember, this particular configuration works only in the Safari and Chrome browsers. You can preview it by choosing File > Preview in Browser > Safari (or File > Preview in Browser > Chrome). For this example, I used the Safari browser to view the embedded video (see Figure 3).

Figure 3 Viewing an embedded HTML5 Video element in Safari.

In the following sections, we'll explore other parameters beyond the ones you've just used (the src parameter defines the video, and the Controls parameter displays the player controls).

6. Defining Video Display and Play Parameters | Next Section Previous Section