HTML5 VideoFacts & FictionBrightcove, Inc.January 2011WhitepaperThe next generation of World Wide Web Consortium(W3C) stan...
ContentsWhy Now?                                                              4So what is HTML5, exactly?                 ...
3The media is buzzing about the promise of what HTML5 has tooffer for the future of online interactive experiences, but bu...
4Why Now?The nearly ubiquitous state of rich, interactive content on               These factors demonstrate just how much...
5                                                                   The promise of the HTML5So what is HTML5, exactly?    ...
6The Reality Today:Fragmentation and ComplexityWhile the standard has noble aims, HTML5 is far from being a            And...
7                                                                      So why would I want to                             ...
8There’s got to be a better way…                                    Brightcove and HTML5 Video We thought the same thing. ...
9                                                                Current Limitations of HTML5                             ...
10                                                                      Best Practices:                                   ...
11HTML5 Fact v. Fiction                                               ConclusionIf you’ve read this far, hopefully we’ve g...
12HTML5 ResourcesIf we’ve whet your appetite and you are eager to learn more,here is a collection of some of the best reso...
Upcoming SlideShare
Loading in …5

HTML 5 video


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML 5 video

  1. 1. HTML5 VideoFacts & FictionBrightcove, Inc.January 2011WhitepaperThe next generation of World Wide Web Consortium(W3C) standards promises to usher in new levelsof interactivity and interoperability on the Web, butthe transformation won’t happen overnight. Thisreport covers everything you need to know about thecurrent and future state of one of the most importantemerging standards for cross-platform online videodelivery, HTML5.
  2. 2. ContentsWhy Now? 4So what is HTML5, exactly? 5The Promise of the HTML5 <video> tag 5The Reality Today: Fragmentation and Complexity 6So Why Would I Want To Support HTML5 Today, if it’s So Complicated? 7There’s Got to be A Better Way… 8Brightcove and HTML5 Video 8Current Limitations of HTML5 9Best Practices: Source Files for HTML5 Video with Brightcove 10HTML5 Fact v. Fiction 11Conclusion 11HTML5 Resources 12© 2011 Brightcove Inc. All rights reserved.
  3. 3. 3The media is buzzing about the promise of what HTML5 has tooffer for the future of online interactive experiences, but buzzoften generates along with it a lot of hype. At the same time,people are nervous about the current state of the standard,which browsers require what codecs, and how to future-prooftheir online media investments. We want to set the recordstraight to separate the fact from the fiction. Does HTML5 killFlash and plug-ins? Is HTML5 video ready for prime time? We’llcover these questions and more in this report.© 2011 Brightcove Inc. All rights reserved.
  4. 4. 4Why Now?The nearly ubiquitous state of rich, interactive content on These factors demonstrate just how much content on thethe Web has led us to a point of transition that inspired the Web has changed and matured from the static HTML Webworking group at the W3C standards body to reconsider the pages of the mid-to-late 1990s, when HTML standards werefundamental language for expressing content on the Web. first widely adopted. Since then many tools and plug-ins have popped up to support rich content behaviors on the Web Video makes up the largest portion of traffic on the that were not described in early HTML syntax. As bandwidth Internet today. Cisco predicted that global Internet video and processing power increased, heavier audio- and video- traffic would surpass global peer-to-peer traffic by the based content experiences became more common, but a end of 2010. Limelight also claims that video traffic online collection of proprietary standards emerged, most of which accounts for up to 51% percent of all US traffic online. required unique plug-ins to “read” those different file types not recognized by HTML. Adoption of mobile browsing is on the rise, and video is a big part of that browsing activity. More than 35% The ubiquity of video in Web and mobile browsing now percent of US mobile subscribers have used their becomes the main driver for evolving the standards to phone’s browser (comScore Nov 2010). Research from support the rich media experiences that have become so Bytemobile suggests that video will take up 60% of all commonplace, so central to the Web. Standards bodies have mobile data in 2011. called for a complete refresh of the way these elements are expressed on the Web. Mobile smartphones are gaining momentum, but the market is fragmented. Apple’s iOS and Android are neck and neck in smartphone platform market penetration, at 25% and 26%, respectively (comScore Nov 2010). More importantly, the two platforms support different video playback environments, the Android supporting Flash and the iPhone and iPad only supporting H.264 codecs with HTML5 markup. Video 51% Other of Traffic DNS Newsgroups Email Peer to Peer Telnet FTP Web 1995 2010 Source: Limelight Networks© 2011 Brightcove Inc. All rights reserved.
  5. 5. 5 The promise of the HTML5So what is HTML5, exactly? <video> tagThe MIT Technology Review puts it well: “HTML5 is taking HTML5’s promise lies in the idea that video is now thought ofthe best of how the Web works and making it standard.” In as a central asset for Web content, and is expressed as such inmoving from a static to a more interactive, media-rich Web, hypertext markup language. We’ve known for a long time thatHTML5 is attempting to explicitly build in all the interactive, video is important, but it was never integrated into the fabricmedia-heavy features that have since emerged, namely audio of the Web (hypertext markup language) in an intentional wayand video playback. until this update.HTML5 is the new standard for structuring and presenting HTML5 aims to improve interoperability of Web experiences.content of any kind on the World Wide Web. This is the first By making <video> syntax standard across all browsers,major update to the standard from the W3C since HTML 4.01 publishers will be able to simplify and standardize playbackwas last updated in 2000. HTML5 aims to make all features on for any device via the browser. HTML5 <video> tag removesthe Web interoperable, regardless of what operating system any need for plug-ins to drive rich media experiences on theor browser you use to access the Web. Web. HTML5 makes media more “native” to the browser.Most importantly is that HTML5 introduces unique syntax In theory, HTML5 aims to have the following impacts:tags for multi-media assets, namely <video>, <audio>, and<canvas>. We’ll be focusing on <video> here, but it’s important Curtail fragmentation of device/operating system specificto understand that this collection of bandwidth intensive, rich- apps by allowing mobile Web scalability for all platformsmedia assets addresses the most significant progress and and form factors.change that has occurred on the Web over the last decade. InHTML5 specifications, these multimedia assets are no longer Eliminate need for downloads and updates of proprietaryafterthoughts, requiring add-on plug-ins to support their plug-ins with open standards-based video playback.playback. Instead, these assets are considered fundamentalelements of content expression on the Web! Speed up experiences: removing the need for plug-in on start up will reduce load time for video watching. Increase use of open and free standards on the Web. Sounds like a miracle standard, no? These promises have generated a lot of buzz, but we want to separate the facts from the fiction. So before you get too excited...© 2011 Brightcove Inc. All rights reserved.
  6. 6. 6The Reality Today:Fragmentation and ComplexityWhile the standard has noble aims, HTML5 is far from being a And with Google Chrome’s recent announcement that theybe-all and end-all solution for interoperability on the Web, at do not plan to support native playback for H.264 codecs inleast for the time being. the <video> tag, this means that the video file that plays on an iPhone will soon not be able to play on Chrome desktopHTML5’s biggest claim is to remove the need for proprietary browsers unless wrapped (once again) in Flash plug-ins.plug-ins to initiate playback on the Web. While that eliminatesone layer of expression between the video and the browser, it There are a lot of reasons that standards bodies haven’tdoesn’t actually simplify everything just yet. decided on a standard codec and container, the majority of which is tied up in the issue of licensing fees for formats and variance in quality. Though H.264/MPEG-4 is widely used forA Standard without Standards its high quality, the fees that may be required for commercialWhy is that? Well, it’s because there’s no one standard set of use by the consortium of license holders known as MPEGcontainers and codecs that works across every browser. So LA prevent it from being sanctioned wholeheartedly by thewith HTML5 we’ve removed one layer in the stack for video standards bodies that favor open (i.e. free) standards.playback with native expression of the <video> tag, but wedon’t have a standard video file type to point to that will workon any device and any browser that you read a Web pagewith. High Quality/ EfficiencyLet’s look at the browser/codec relationship grid as it standstoday: Low Quality/Native video format support Efficiency Ogg Theora H.264 VP8 WebMInternet Explorer No 9.0 Depends Proprietary Free & Open Mozilla Firefox 3.5 No 4.0 Google Chrome 3.0 No 6.0 Safari No 3.1 Depends Opera 10.5 No 10.6 <video> understood, but not all values are supported or are experimental <video> fully supported <video> element ignored© 2011 Brightcove Inc. All rights reserved.
  7. 7. 7 So why would I want to support HTML5 today, if it’s so complicated?Flash EntrenchmentBecause HTML5 in Chrome will require WebM codecs, we Given that complicated, multi-stepped formula for supportingbelieve you’ll see a lot of publishers defaulting to Flash for HTML5 video fallback for any device, you might be askingdesktop browser playback for the time being (which will still yourself, “Why would I bother with HTML5 at this point?”be able to support H.264 video files that are also required forApple devices). The net-net: this WebM announcement will Well, there are a few good reasons:result in further entrenched use of Flash for Chrome desktopand mobile environments because it works today, and will Mobile Video: If you care at all about giving mobilecontinue to work for at least the next several years. users a quality Web browsing experience similar to what they would find on a desktop then you must considerThe Fallback supporting HTML5 video playback. Some might take the approach of delivering video through proprietary mobile So what does that mean practically? Well, Mark Pilgrim puts it apps. But developing apps for multiple mobile platforms well in Dive into HTML5: can be just as complex as building sites with fallback plans for different standards requirements. In particular,“There is no single combination of containers and codecs that HTML5 video is essential if you hope to reach consumers works in all HTML5 browsers. This is not likely to change in the browsing on the iPhone, iPad, and iPod touch. near future. To make your video watchable across all of these devices and platforms, you’re going to need to encode your Emerging Standards: While it’s frustrating that some video more than once.” of these details (like a recommended codec) in the HTML5 standard haven’t been fully hashed out, andThe same enhancements that aim to make the Web more building on emerging standards can feel like an uncertainvideo-friendly are for the time being complicating matters for foundation, we’re certain that it’s the way forward, andpublishers more than ever before. Here’s what Mark Pilgrim it’s worth getting a head start to future proof onlinesuggests you do to create a series of fallback options for your media investment as adoption spreads. You can weighHTML5 video to work everywhere: the trade-offs for yourself, but the sacrifices are small in return for keeping pace with the fast-growing adoption curve.For maximum compatibility, here’s what your video workflowwill look like: Blossoming Ecosystem: In many ways, HTML5 is today where Flash video was in 2002. All the third-party 1. Make one version that uses WebM (VP8 + Vorbis). integration and broad-based feature support that made Flash robust and allowed Internet video to take 2. Make another version that uses H.264 baseline video and off are only just beginning to emerge on the HTML5 AAC “low complexity” audio in an MP4 container. standard. That can be frustrating at times, but there will undoubtedly be a similar ecosystem of innovation 3. Make another version that uses Theora video and Vorbis and support to emerge around the HTML5 standard. It’s audio in an Ogg container. therefore certainly worth getting a head start today with 4. Link to all three video files from a single <video> element, an HTML5 strategy to make sure you’ll be ready to take and fall back to a Flash-based video player. - (http:// advantage of the ecosystem innovations as they come online. Sound complicated? It is.© 2011 Brightcove Inc. All rights reserved.
  8. 8. 8There’s got to be a better way… Brightcove and HTML5 Video We thought the same thing. In fact, we’ve always felt that way. Brightcove began supporting HTML5-friendly playback when We’ve always believed in the mantra that online video should we first started encoding with H.264 codecs in anticipation of“just work.” To that end, we’ve also believed that publishers the iPad and iPhone requirements of our biggest publishers. producing content shouldn’t have to be the ones worrying Since then, we’ve introduced a number of features that make about standards compatibility and fallback plans. In fact, supporting HTML5 video ridiculously easy (especially in Brightcove aims to shield you from the fragmentation and contrast to that three-version fallback plan). complexity of these emerging standards. No-Sweat EncodingSo how to we do that? Let’s take a look: You only need to upload one video source file to Brightcove to serve video to all of these different codecs; no need to worry about encoding three plus video formats for every HTML5 contingency. Brightcove accepts your media in almost any format and encodes it using encoding technology to maximize quality and minimize file size. We automatically generate multiple renditions of each source file based on the settings in your profile to match the playback environment to ensure smooth WebM streaming. In the future, Brightcove will also automatically H.264 generate both H.264 and WebM renditions of all video content uploaded to the Brightcove service. Desktops Smart Phones Smart Players Now that you have the right renditions and codecs, how does Connected TVs the fallback work? That’s where our smart players come into play. They are designed to allow you to copy one JavaScript embed code into your website HTML that intelligently reads the playback environment when it’s loaded to send the appropriate rendition and codec for that environment. Advertising Analytics User Experience Brightcove’s smart players will deliver your video in Flash or HTML5, depending on your viewer’s device capabilities. This enables you to use a single Brightcove player that can deliver video in Flash or HTML5, so you don’t have to create and manage separate players for each viewer environment and Quality Security Extensibility your existing players can automatically load in Flash or HTML5 Delivery mode without any custom work or additional JavaScript on your part.© 2011 Brightcove Inc. All rights reserved.
  9. 9. 9 Current Limitations of HTML5 We’re really excited about all the progress we’ve made in supporting HTML5 and Flash video experiences so far. At the time of this writing (January 2011), we also want to make clear the current limitations of HTML5 video. HTML5 video is about where Flash was in early 2002, in terms of maturity and robustness of interactive features. The challenge today is that HTML5 video is really only focused on the core function of playback. That is, you download a video file, a player window renders, you press play, the video plays, you can forward, rewind, pause, and stop the video. Obviously,As of January 2011, 67% of Brightcove accounts have at least playback is the foundation of a good video experience, butone HTML5 enabled player live. That’s because Brightcove publishers want so much more than just playback. Whathas made it incredibly easy to convert existing players over they want is a holistic video experience, which includes theto HTML5 playback, and by default all new players created elements like branded players, playlists, advertising, analytics,since mid-August 2010 are automatically HTML5 compatible, audience profiling, and calls to action, and content protection.unless you opt out. In fact, we wouldn’t be surprised to findthat some of our favorite customer examples that support Right now, those more complex features have to be rebuiltiPad playback weren’t even worried about doing something from the ground up to work in the HTML5 environment.special for HTML5. They just put the player embed code on We’ve come a long way from just getting video to play, so wetheir website and it just works. don’t want to abandon all of those rich interactive features that publishers need, which begins to explain our reasoningCustomization and HTML5 for defaulting playback to Flash, with HTML5 as the fallback where appropriate and needed.We take pride in our ability to support customized, brandedplayer experiences across every device. That means that theadvanced player customization you created with Brightcove Here’s a dose of reality describing the current limitations ofExperience Markup Language (BEML) or the player skin and HTML5 video supporting these advanced features:style you designed with our point-and-click editor won’t belost when you switch over to HTML5 playback environments. Analytics: We have basic viewership reporting today,Our smart players make it possible to maintain the same but drill-down in to engagement and social sharingplayer experience and design no matter where they playback. and geography are still to come. Right now, data aboutThe same is true of our support for playlist players: the streams, player loads, and bandwidth usage for HTML5experience is constant, no matter where it plays. playback are lumped together with data from Flash mode, but we’ll be able to separate out HTML5 usage from Flash usage in the near future. Advertising: Ad servers and ad networks are gradually adding support for HTML5 playback, but it is taking a while to get everything working across the broad ecosystem. In the future, we will have new APIs that enable ad integrations between Brightcove smart players and other ad partners that support HTML5 advertising delivery.© 2011 Brightcove Inc. All rights reserved.
  10. 10. 10 Best Practices: Source Files for HTML5 Video with Brightcove Content Protection: The HTML5 specification does If you are ready to get started with HTML5 video with not cover or contemplate DRM to prevent content Brightcove, we’re including a few tips for optimizing HTML5 theft. The lack of content protection in the standards playback. will add significant friction for major media companies to deliver their content through HTML5 experiences. HTML5 video tags work with the following: H.264 video Without established standards for content protection, the created with the MPEG4 codec, WebM video made with the industry will be forced to rely on fragmented, proprietary VP8 codec, or Ogg Theora video. H.264 and WebM offer solutions. better video quality, and WebM is open source. Live Streaming: The HTML5 spec does not cover or contemplate live streaming. Apple offers a proprietary At Brightcove, we recommend encoding in H.264, because method, but that only works for iOS devices. it will work in both Flash and most HTML5 environments where Flash will not work. We suggest 2 pass H.264 encoding Captions: A workable solution for captions is not covered with keyframes at least every 6 seconds. The good news in the spec, and so it falls on developers and online video is that you don’t have to work in that format. If you prefer platforms to implement this as a feature. something else, Brightcove can automatically take care of the transcoding to H.264 for iOS playback. We just recommendSo for the time being (as of January 2011), we’re defaulting to H.264 base on quality. For more detail, check out our videoFlash with fallback support for HTML5 in order to maintain the source file specifications and set of features we offer to publishers. That will remain thecase until we can build out these features for HTML5 playback, Brightcove’s smart player feature has pretty much the sameall of which are very high priorities on our technical roadmap. content requirements as any mobile video:Refer to our Product Updates for more recent details on all ofthese features. Your videos need to be encoded in H.264. You can’t deliver VP6 (FLV) videos in an HTML5 video player. Your account must be set up either with universal delivery service or progressive download (PD). You can’t use Flash Media Server streaming (FMS) to deliver videos in an HTML5 video player. Read about Setting Video Delivery Options. In addition, you should make sure that your videos have one or more lower bandwidth renditions that are suitable for delivery over mobile networks. If your videos use Brightcove’s default transcoding options, you are all set. Otherwise, you want to make sure your videos include a rendition encoded in H.264 baseline profile with a total bandwidth of approximately 256 kbps.© 2011 Brightcove Inc. All rights reserved.
  11. 11. 11HTML5 Fact v. Fiction ConclusionIf you’ve read this far, hopefully we’ve given you a sense of the HTML5 is an exciting development in the history of rich-potential for and current limitations of HTML5 standards. Let’s media content on the Web, and that’s why Brightcove isdispel some of the misconceptions that have emerged from leading the way in supporting HTML5 video experiencesthe buzz about HTML5: for our publishers. HTML5 is here to stay, but it is still in its infancy. The Flash platform support more advanced, matureFiction: HTML5 kills Flash and plug-ins. interactions and integrations, and that’s why we believeFact: Though HTML5 standards aim to natively integrate it’s important for website owners to develop a strategy forthe media types that Flash came to support over the last utilizing both approaches.decade, the fragmentation surrounding codecs and containerstandards for video in the browser will push many publishersto continue defaulting to Flash experiences that work almostanywhere.Fiction: HTML5 video is ready for prime time.Fact: This true for basic playback. But for more advancedand sophisticated video experiences that our customers havecome to expect, there’s a lot of development work to be doneto bring HTML5 to parity with Flash.Fiction: iPad compatibility equals HTML5 compatibility.Fact: iPad compatibility for Web video (not native apps)requires H.264 codec expressed in HTML5. If you’ve got thatcovered, you can playback on any iOS device. However, H.264won’t playback natively in Firefox or Chrome going forward.Therefore, iPad playback doesn’t necessarily equate tocomplete HTML5 video compatibility; you’re only part of theway there if you haven’t supported WebM/Ogg for other opensource browser playback experiences.Fiction: HTML5 is about video.Fact: While at Brightcove we’re most focused on the video-related implications of HTML5, the standard update is reallyabout encompassing all rich-media interactive experienceswithout the need for plug-ins. That’s why HTML5 includesalong with <video> the <audio> and <canvas> tags, andsupports interactive behaviors like drag and drop.© 2011 Brightcove Inc. All rights reserved.
  12. 12. 12HTML5 ResourcesIf we’ve whet your appetite and you are eager to learn more,here is a collection of some of the best resources we havefound to explain the state of HTML5 today, along with sometools to help you get started supporting HTML5 video withBrightcove.HTML5 Context More Examples and Source CodeThe Future of Web Content – HTML5, Flash & Mobile Apps, HTML5 Showcase, AppleTechCrunch, Jeremy Allaire HTML5 Studio, GoogleDive Into HTML5, Mark PilgrimThe Web Is Reborn, Technology Review, Bobbie Johnson(log-in required) HTML5 Test Tools HTML5 Support Test, BrightcoveThe Present and Future of HTML5 Video Experiences,Jeff Whatcott Browser Video Compatibility, caniuse.comWebM and The New Online Video Landscape, Jeff Whatcott Brightcove Technical DocumentationCustomer Examples of HTML5 Video Video Tutorial: HTML5 Smart PlayersAndrew Zuckerman Delivering Video with HTML5 and Smart PlayersArrojo Education Setting Your HTML5 Video Delivery OptionsSPIN Magazine Video Test for HTML5The New York TimesThumb MagazineTime Inc.Warehouse One Cambridge Center 617 674 6500 tel Cambridge, MA 02142 617 395 8352 fax