I’m going to kick off this article by sharing what sparked my interest to write this article about HTML5 video useage. I recently went to boxee’s website (a company that offers Internet-based TV products and services), and I was happily surprised by the clever intro they’ve added to their site. It takes advantage of HTML5 video so people using web browsers not yet capable of HTML5 will have to see it second-hand, or you can (as always) choose to download Google Chrome or Safari to take a peek at it yourself. I’ve embedded a screen recording of the HTML5 version below so you can take a look (screen recording makes it look choppier than it really is).
Click here to view the embedded video.
Did you see the intro? You can skip this paragraph if you haven’t seen it yet, because I’m going to proceed to break-down what about this intro made me instantly know it was done with HTML5 video (honestly, the first thing I did after seeing it was look at the site’s code to verify my thought that it was indeed HTML5). The first thing that tipped me off was how fast it loaded. Flash videos take time to load up the Flash plugin instance (commonly causing a splash of color/white to be shown for a split second where the plugin will appear) and load the video player/skin portion of the Flash file (since Flash requires a “helper” file alongside the actual video file in order to display it) in addition to loading the video itself. Instead of requiring that whole process, the only thing that needs to be loaded using HTML5 is the video itself, and that means videos can start to play in less than a second. Another thing I noticed was how responsive my browser was even though it was playing a rather large video. Flash videos of that size typically cause my scrolling to become more choppy and are more CPU intensive than what was seen on this HTML5 version. Another, less obvious, thing I noticed was how well integrated the video was into the website design. The tabs at the bottom have a nice translucent look to them and there’s various pieces of the page such as their logo and login form in which part of the video takes place behind (this is something that is commonly problematic when using the Flash plugin), and the video compensates for the dynamic width of the browser really well.
HTML5 Video Usage as of October 2010. Courtesy of Mefeedia.com
With all of that whizzbang out of the way, we can now start to cover how the landscape of the Web has changed now that people are adopting the use of the HTML5 video standard. Part of the recent announcements was that Boxee has embraced HTML5 and switched over to using Webkit for it’s built-in web browser functionality. This definitely seems to the the trend since Boxee isn’t the first or the only company to switch over to the Webkit engine (most commonly known for it being what powers the Google Chrome and Safari web browsers) in an effort to provide the best support possible for the latest Web standards. Mefeedia (a video search engine) said in lastt October that 54% of web video is now available in HTML5 (doubled in 5 months), and they attribute the growing market of “smart” mobile devices as being the primary driving factor. These numbers are a good sign, but I still can’t believe the fact that bands and restaurants continue to use sites built for the Flash plugin even though their websites are most commonly accessed on a mobile device by people looking for a place to go while they’re out and about (costing them potential attendees/business with no real benefit as a trade-off).
Connect with HRB:
It’s not all perfect though, because one thing that many people are still anxious to see the result of is if copyright-protected video providers decide to switch over to HTML5 or not. Currently, sites like Hulu and Netflix use Flash as it provides an encryption method that prevents people from ripping the video directly from the service. I personally think that’s actually a non-issue considering the people that want the content for free already have multiple avenues for acquiring the content (download via bittorrent, use a screen capture program [such as the one I used for the video embedded above] as a loophole around any protection the site might have, etc) and the protection methods that are available to be used in conjunction with HTML5 are actually enough to thwart off anyone looking to get the content from that particular website. A sticking point that affects web developers is the lack of agreement on which video codec is the official standard for HTML5 video, and this means that they need to offer multiple video files for various browsers (Firefox is looking for an open-source OGG video, Webkit is looking for a higher-quality H.264 video, and some are hoping WebM catches on as the official format). These issues can all be agreed upon eventually, and websites will continue to switch over to using HTML5 video so the future is looking pretty bright for a web video standard.