Presenting HTML5 Video with Dreamweaver CS5
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
With Steve Jobs' April 2010 declaration that Apple's portable and popular devices (iPhone, iPad, and so on) will never support Flash video, the world of online video was shaken from head to toe. In ruling out support for Flash video, Jobs declared that the future of online video is HTML5—a set of web design standards that include native browser support for some kinds of video. (Native means without the need for a plug-in video player such as the QuickTime Player, Windows Media Player, or Flash Player.)
That's quite a shift. Flash video is the dominant vehicle through which people watch video online—which will continue to be true for quite awhile. At the same time, web designers who want to provide video for iPhones, iPods, and iPads need to build HTML5 support into their work. In this article, I'll walk you through how to do just that.
Getting Started
Before we embark on a step-by-step journey to embed HTML5 video, here's what you'll need:
- Dreamweaver CS3, CS4, or CS5. Earlier versions won't support the tools you need for the following steps.
- Adobe Media Encoder CS4 or CS5. We'll use this utility to convert video to the HTML5-friendly H.264 format. Alternatively, you can search for or get your hands on video that's already in H.264 format.
- HTML5 Pack for Dreamweaver CS5. I'll show you how to get this pack, which is free for registered users of Dreamweaver CS3, CS4, or CS5.
Before you download and install the Dreamweaver HTML5 Pack, let me supply a brief bit of background information on this utility, which may be helpful in understanding this release.
Dreamweaver CS5, along with the rest of Adobe's Creative Suite 5, was released just before Jobs' letter that changed the paradigm on web video development. That left Adobe in an awkward position, without tools to create web content for HTML5. But Jobs' letter was a pivotal event in a process that had already gathered much momentum. Common standards for HTML5 are beginning to emerge from the major browser developers: Apple (Safari), Google (Chrome), Opera Software (Opera), Mozilla (Firefox), and even—reportedly—Microsoft (with the upcoming version of Internet Explorer).
Adobe's response to these developments was substantial, but unfortunately somewhat buried in public awareness by the flurry of developments in the wake of Apple's announcement. Nearly all the reference books, reviews, and major press coverage of CS5 were already swirling around in print and online, and media attention had "moved on" when Adobe released the HTML5 Pack in the form of a Dreamweaver extension.
Extensions to Adobe products are usually single-feature, much less substantial add-ins that can be downloaded and integrated into Adobe products, but in this case, an "extension" serves as the form through which Adobe delivered what used to be called an "incremental upgrade"—something that in earlier eras would have been branded Dreamweaver CS5.1.