Thanks to modern web browsers supporting HTML5 and recent updates to Adobe Dreamweaver CS6, you can post videos on web pages quickly and easily.
Follow this short tutorial to embed a sample video file on an HTML5 page in Dreamweaver. Click the controls in Figure 1 to see the sample in action.
To get started with this article, download and install Dreamweaver CS6 from Adobe Creative Cloud if you haven't already done so. Then download the sample files, uncompress the ZIP archive (4 MB), and save the project folder (html5_vid) to your desktop.
Note: You must download the latest version of Dreamweaver from Adobe Creative Cloud (either free trial or purchased membership) in order to access the HTML5 features described in this tutorial.
The project folder contains a subfolder named video with two silent video files named trolly.mp4 and trolly.ogv. It also has a poster image, named trolly.jpg, which appears on the page before the video begins playing.
Two digital video files with duplicate content are provided so you can experiment with adding multiple videos to the same page. The MP4 file is encoded using the H.264 video codec, and the OGV file is encoded using the Theora/OGG codec. Both codecs are compatible with HTML5. To ensure your videos play on a wide range of browsers, it's a good idea to upload and link to more than one video source file.
Using Dreamweaver CS6, you can quickly define a site and create an HTML5 web page using the New Document dialog box. Follow these steps:
The HTML5 file is now saved in a defined site folder, alongside the video folder that contains the video files.
In this section, you'll edit the web page to add some video, using the recently updated Insert panel in Dreamweaver CS6:
Note: If you prefer to enter the dimensions yourself, click once in Code view in the opening video tag, right after the word "video." Press the spacebar, type the letter W (to start entering the word width and invoke code hints). Then press Enter or Return to add the width attribute. Repeat this process to add the height value.
Notice that the Alt Source 1 field automatically populates with the path to the other video file in the folder with the same name. Provide multiple video formats (using file extensions like MP4, OGV, and WebM) by simply naming the files with the same filename and setting one of the files as the video source in the Property inspector.
The syntax to provide multiple video source files looks like this:
<video width="640" height="360" controls> <source src="path_to_video.mp4" type="video/mp4"> <source src="path_to_video.ogv" type="video/ogg"> </video>
As you can see from this short example, the updated capabilities in Dreamweaver CS6 let you add and preview HTML5 video content quickly, so you can spend more time fine-tuning your designs and delivering your projects.
Finally, visit the following resources to learn more about incorporating HTML5 video in web pages and mobile sites:
Tommi West is a freelance web designer and creative director at tommiland.com. Prior to starting her own business in 2004, she worked at Macromedia for six years as a technical writer, editor, and web producer. Tommi is an Adobe Community Professional.