Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
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.
- 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.
- Type <vi and then press Tab to complete the beginning of the <video tag.
- Press the spacebar and then double-click src.
- A Browse link appears, as shown in Figure 2. Double-click the Browse link to open the Select File dialog.
- 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.
- 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:
- Type </ and the HTML5 Pack will autocomplete the closing tag </video>.
){kind=small}
Figure 2 Browsing for a video file.
<video src="xxx.mp4" controls="controls"
where xxx is the filename of your H.264 audio file (or an OGG video file).
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).