Everything You Need to Know about HTML5 vs Flash Video

By Ryan Whitwam

Some sites are beginning to implement HTML5 video players. This is what we know so far.

For years now we've been getting our online video delivered to us in a number of formats and players, but none has been more pervasive than Adobe Flash. At this point, the overwhelming majority of video on the web is wrapped in Flash, and this is starting to become a problem for content producers who want to delivery their video to mobile users. While it is true that Flash has never been a great product from a performance standpoint, people didn't used to have devices where performance and battery life were highly limited, like they are in phones and netbooks. Now, HTML5's video player is looking like a possible successor to Flash that can solve these problems. In fact, some site are already testing out HTML5 players. But as it stands, HTML5 isn't the holy grail of web video embedding as many have claimed--there are many pros and cons to using this new standard.

The Pros and Cons of Moving to HTML5

HTML5's <video> tag is capable of embedding a video player within a page's existing HTML. This enables web developers to build players that are more consistent with the feel of their site. It's a more cohesive experience. A related reason for sites to jump on the HTML5 bandwagon is the open nature of HTML5. Adobe Flash is a closed platform owned entirely by Adobe. HTML is the language of the web offering developers more freedom. The standards will be advanced in an open manner, and many believe with increased innovation.

HTML5 has some spooked for an entirely different reason. No one is quite sure how it's going to work large scale yet. So far, the majority of sites have decided to use the H.264 codec to encode the video they are embedding with HTML5. But many have concerns about future patent issues with that codec which is owned by MPEG-LA. The competing OGG/Theora standard is open, but not free from possible legal threats. Then there's Google, which is expected to start pushing VP-8 as a completely open alternative. Wrapping a video in Flash means the codec is largely unimportant, but HTML5 will expose the file to a browser, and you don't want to pick a losing format because the browser has to support it.

The openness of HTML5 can also be a drawback in some cases. Even with the more professional implementations out there, the video files themselves are more accessible. This means it's easier for users to download the files (more on this later). On sites that are testing HTML5 video, many videos are given a special status because of copyright concerns, and are not playable in the HTML5 player. In these cases, it falls back to the Flash player.

Current HTML5 video providers

YouTube. The change was fairly easy for Google and their legion of engineers to implement. YouTube content is already encoded in H.264, so they just needed to design a HTML5 video player. YouTube's player is available for most of their videos. You notice one benefit when using the seek functionality. There is no buffering, you just go the that spot in the file. You can enable the so-called "TestTube" project here. Since it is H.264, it will only work with Chrome and Safari.

Vimeo launched a test HTML5 video player back in January. It looks very similar to the standard Vimeo player, but offers some interesting benefits. The player will load immediately, and there's no buffering when skipping around, just like the YouTube player. Vimeo also says their HTML5 player can offer better overall video quality than their Flash player. A drawback is there is no support for full screen video, as this is a limitation in current web browsers. The YouTube player also has this problem, but they somewhat negate it by allowing the uses to set the player to span most of the window. The Vimeo player can be enabled on any video by clicking the "Switch to HTML5 player" link beneath each video. It should work in Chrome or Safari. Some 35% of Vimeo's content won't work, in which case they will default back to the Flash player.

So Firefox users might be feeling a little left out at this point, but don't worry, Dailymotion has you covered. The Dailymotion implementation of HTML5 video on their "open video" page will work in Safari, Chrome, or Firefox, though there were some differences in functionality. Chrome provided animated previews of videos, which was some nice eye candy. Chrome also exhibited some buffering behavior when seeking. Firefox did not seem to be buffering when we skipped around. But even the brief delay in seeking on Chrome was better than buffering a Flash video.

If you want to see an example of straight HTML5 video, head over to Sublime Video and checkout their upcoming HTML5 player. This will work in Chrome, Firefox, or Safari. It outputs Ogg/Theora to Firefox, and H.264 to Chrome and Safari. This player is designed primarily for WebKit browsers, but the developers are working to make the Gecko-based Firefox part of the HTML5 video club. Chrome and Safari users get to see some nice HTML5 features like zoom animations and fade in controls.

How to extract HTML5 video

You may be wondering what a possible changeover to HTML5 video will mean for you. Well, it might mean better interoperability and usefulness of video content. For instance, downloading pure  HTML5 embedded video is a snap - well, a click. On a standard HTML5 player with the <video> tag, right-clicking will offer a 'Save video as" option. You can then save it wherever you like. The real benefit here is this video is perfect for immediate use on mobile devices. Android, WebOS, and iPhone OS all play MP4 videos beautifully. This is only the case for HTML5 implementations that use MP4 wrapped H.264 video, as Ogg vids don't have the same near-universal compatibility.
Greasemonkey scripts to do it. We suspect there will be more methods of doing this as HTML5 video becomes more common. On sites that only serve up HTML5 video for the iPad, you can use the Firefox add-on User Agent Switcher to access the HTML5 video by pretending you're browser is an iPad. Some have reported success doing this with Flickr. The video won't play in Firefox, but you can still manage to save it. It won't work everywhere, but it's still something. The final form of HTML5 video is still unclear, but the video files will probably be more accessible and the file your likely to get out of this is an H.264 encoded MP4 file.

Flash video is also accessible, but it's just not as useful. There are a number of services that can help expose the video file behind the Flash player. One such service is KeepVid. By pasting in the video URL you are presented with download links to the source FLV. The problem with this is that whenever YouTube changes something on their back end, KeepVid can be temporarily broken. There are also a number of Firefox and Chrome extensions that allow video to be downloaded.

Flash downloads often come out as .FLV files. Sure, they still work, but you can't just drop them on your mobile device and play them. They'd have to be converted with something like Handbrake to be useful. You'd probably just end up converting them to MP4 files anyway, so this is definitely a benefit of HTML5 video.

We certainly like all the innovation happening around HTML5 video. Most of the players out there are of high quality and have the potential to bring better video to mobile devices. It can range from simple, to a bit of a chore to get the video out of HTML5, but we really hope wide-scale implementations will steer away from making it too difficult. The possibility of being able to easily save perfectly formatted video for mobile playback gives us chills. How do you feel about HTML5 video? Is it the future, or just so much hype?