Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating HTML5-Ready Video
Next, you need to prepare the video that you'll embed using the HTML5 Pack. Two video formats are supported by HTML5: H.264 and Ogg Theora. Both are compression formats; that is, they take uncompressed video files (from formats such as QuickTime's MOV or Microsoft's WMV) and reduce their size by using technology that eliminates unnecessary digital video data. Here's an easy-to-grasp example: A video that has a clear blue background behind every frame can be compressed so that the data that defines the background is saved only once and applied to every frame, reducing file size without reducing the image quality of the video.
H.264 is a proprietary format, and browser developers need to have a licensing arrangement with the owners of the format in order to implement the H.264 format in their browsers. Apple's Safari browser and Google's Chrome have such arrangements and support H.264 video; previews of Microsoft's upcoming Internet Explorer 9 indicate that it will also support H.264.
Theora is a free video-compression format, distributed without licensing fees. Firefox and Opera support Theora video.
Given this lineup, the momentum seems to be moving toward H.264 becoming the standard for HTML5 web video, so I'll focus on that format in the following steps for embedding HTML5 video in Dreamweaver CS5 web pages. (But I'll also note how you can substitute Theora's OGG video instead if you choose that format.)
If you have Adobe Media Encoder CS5, you can use the following steps to convert video from other formats to H.264:
- Launch Adobe Media Encoder CS5.
- Click the Add button. In the Open dialog that appears, navigate to and double-click a video from another format (such as QuickTime MOV, Flash FLV, or Microsoft AVI) to add it to the Media Encoder queue.
- In the Format column, choose H.264 as the export format.
- From the Preset pop-up, choose one of the iPhone or 3GPP options (see Figure 1). Base your selection on the medium in which people will be most likely to watch your online video. In a professional scenario, you would create several versions of the video, making them available as options for people using different browsers and devices. We'll keep this example simple by choosing just one output format.
- Click the link in the Output File column. The Save As dialog opens. Navigate to the folder you defined earlier as the local Site folder for your Dreamweaver website, and click Save to designate this folder as the target for your video output.
- Click the Start Queue button to generate an H.264 version of your video. Compressing video is very demanding on your computer's resources, and this process will take some time. When it's complete, you're ready to embed the video in a web page using HTML5.
)
Figure 1 Choosing a Media Encoder preset for an H.264 format video.