Conversion of Flash to HTML 5
Our client was concerned: over 65 Million iPhone, iPod touch, and iPad users couldn't view the videos on their site. Here's how we fixed it.
Background
Since the early days of the World Wide Web, Adobe Flash has been a popular tool for adding interactive games, animation, and video to web pages. While it was not without its controversies, Flash was (and is) widely available and widely used on the desktop, and is promised for many mobile platforms. Because of this widespread availability, many people were surprised when Apple declined to allow Flash support for iOS (their iPhone and iPad platforms). We won't weigh in on whether Flash should be done away with, or whether Apple is making a big mistake. However, facing the fact that Flash is not available on these popular Apple devices, and is not yet universal on other vendors' mobile devices, we felt it was important to provide an alternative.
Hypertext Markup Language (HTML) is the standard "language" that underlies all web pages on the internet. While there are many server-side technologies like Java, ASP or PHP, these technologies all generate HTML, which is how your browser knows what to display. The HTML standard is driven by the W3C, a standards body that includes virtually all of the major companies that create web technologies, along with academics and open source developers. The W3C has proposed a new version of HTML, version 5, that will include many (although not all) of the capabilities that are currently only possible using Flash. Preliminary support for HTML5 already exists in many browsers, including Mozilla's Firefox, Apple's Safari, Google's Chrome, and Opera's Mini; furthermore, Microsoft has announced that support will be built in to the next generation of Internet Explorer.
The Solution
HTML5 has native support for several video encodings, but there is no one format that works on all major browsers. Furthermore, with Internet Explorer not yet supporting HTML5, we needed a solution that would work for everyone.
The first step involved encoding video into the two most widely-supported formats*: Ogg and h.264. The page hosting the video was recoded to HTML5, and these videos were included using the "video" tag. Because Internet Explorer does not yet support the "video" tag, we used an embedded Flash player object within the video tag. Fortunately, the Flash player can play the same h.264 stream as is supported by HTML5.
Because this page contained a clickable library of videos, we had to do some special Javascript to swap the current playing video. The Javascript detects whether the video is being played natively by HTML5, or being played via an embedded Flash player. This is where we discovered that certain browsers don't stream h.264 video correctly when using a Flash player and dynamically played using Javascript. So to avoid long waits when switching videos in the Flash player, we opted to fall back on the original Flash FLV (h.263) video format.
The result is we now have a video page that will work equally well across many platforms. It requires more video encodings than the original Flash-only version, but has the advantage that it will work well on countless devices including iPhone, iPad, and phones built using the Opera Mini browser.
(*These format names are actually shorthand for their more specific and cryptic names. For example, "Ogg" format is an Ogg container using the Theora video codec and the Vorbis audio codec. Future efforts would probably use Google's new WebM format as well.)