SlideShare una empresa de Scribd logo
1 de 12
Descargar para leer sin conexión
HTML5 Video
Facts & Fiction
Brightcove, Inc.
January 2011
Whitepaper




The next generation of World Wide Web Consortium

(W3C) standards promises to usher in new levels

of interactivity and interoperability on the Web, but

the transformation won’t happen overnight. This

report covers everything you need to know about the

current and future state of one of the most important

emerging standards for cross-platform online video

delivery, HTML5.
Contents

Why Now?                                                              4

So what is HTML5, exactly?                                            5

The Promise of the HTML5 <video> tag                                  5

The Reality Today: Fragmentation and Complexity                       6

So Why Would I Want To Support HTML5 Today, if it’s So Complicated?   7

There’s Got to be A Better Way…                                       8

Brightcove and HTML5 Video                                            8

Current Limitations of HTML5                                          9

Best Practices: Source Files for HTML5 Video with Brightcove          10

HTML5 Fact v. Fiction                                                 11

Conclusion                                                            11

HTML5 Resources                                                       12




© 2011 Brightcove Inc. All rights reserved.
3




The media is buzzing about the promise of what HTML5 has to
offer for the future of online interactive experiences, but buzz
often 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-proof
their online media investments. We want to set the record
straight to separate the fact from the fiction. Does HTML5 kill
Flash and plug-ins? Is HTML5 video ready for prime time? We’ll
cover these questions and more in this report.




© 2011 Brightcove Inc. All rights reserved.
4




Why Now?

The nearly ubiquitous state of rich, interactive content on               These factors demonstrate just how much content on the
the Web has led us to a point of transition that inspired the             Web has changed and matured from the static HTML Web
working group at the W3C standards body to reconsider the                 pages of the mid-to-late 1990s, when HTML standards were
fundamental 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




                                                                   The promise of the HTML5
So what is HTML5, exactly?                                         <video> tag
The MIT Technology Review puts it well: “HTML5 is taking           HTML5’s promise lies in the idea that video is now thought of
the best of how the Web works and making it standard.” In          as a central asset for Web content, and is expressed as such in
moving from a static to a more interactive, media-rich Web,        hypertext markup language. We’ve known for a long time that
HTML5 is attempting to explicitly build in all the interactive,    video is important, but it was never integrated into the fabric
media-heavy features that have since emerged, namely audio         of the Web (hypertext markup language) in an intentional way
and 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 playback
was last updated in 2000. HTML5 aims to make all features on       for any device via the browser. HTML5 <video> tag removes
the Web interoperable, regardless of what operating system         any need for plug-ins to drive rich media experiences on the
or 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 specific
to understand that this collection of bandwidth intensive, rich-         apps by allowing mobile Web scalability for all platforms
media assets addresses the most significant progress and                 and form factors.
change that has occurred on the Web over the last decade. In
HTML5 specifications, these multimedia assets are no longer              Eliminate need for downloads and updates of proprietary
afterthoughts, requiring add-on plug-ins to support their                plug-ins with open standards-based video playback.
playback. Instead, these assets are considered fundamental
elements 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




The Reality Today:
Fragmentation and Complexity

While the standard has noble aims, HTML5 is far from being a            And with Google Chrome’s recent announcement that they
be-all and end-all solution for interoperability on the Web, at         do not plan to support native playback for H.264 codecs in
least 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 desktop
HTML5’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 eliminates
one layer of expression between the video and the browser, it           There are a lot of reasons that standards bodies haven’t
doesn’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 for
A Standard without Standards                                            its high quality, the fees that may be required for commercial
Why is that? Well, it’s because there’s no one standard set of          use by the consortium of license holders known as MPEG
containers and codecs that works across every browser. So               LA prevent it from being sanctioned wholeheartedly by the
with 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 we
don’t have a standard video file type to point to that will work
on any device and any browser that you read a Web page
with.
                                                                          High Quality/
                                                                             Efficiency
Let’s look at the browser/codec relationship grid as it stands
today:



                                                                          Low Quality/
Native video format support                                                 Efficiency


                          Ogg Theora          H.264       VP8 WebM
Internet 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




                                                                      So why would I want to
                                                                      support HTML5 today, if it’s
                                                                      so complicated?
Flash Entrenchment
Because HTML5 in Chrome will require WebM codecs, we                  Given that complicated, multi-stepped formula for supporting
believe you’ll see a lot of publishers defaulting to Flash for        HTML5 video fallback for any device, you might be asking
desktop 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 for
Apple devices). The net-net: this WebM announcement will              Well, there are a few good reasons:
result in further entrenched use of Flash for Chrome desktop
and mobile environments because it works today, and will
                                                                           Mobile Video: If you care at all about giving mobile
continue 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 consider
The 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, and
The same enhancements that aim to make the Web more                        building on emerging standards can feel like an uncertain
video-friendly are for the time being complicating matters for             foundation, we’re certain that it’s the way forward, and
publishers more than ever before. Here’s what Mark Pilgrim                 it’s worth getting a head start to future proof online
suggests you do to create a series of fallback options for your            media investment as adoption spreads. You can weigh
HTML5 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 workflow
will 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
       diveintohtml5.org/video.html)                                       online.


 Sound complicated? It is.




© 2011 Brightcove Inc. All rights reserved.
8




There’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 Encoding
So 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




                                                                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, but
one HTML5 enabled player live. That’s because Brightcove        publishers want so much more than just playback. What
has made it incredibly easy to convert existing players over    they want is a holistic video experience, which includes the
to 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 find
that some of our favorite customer examples that support
                                                                Right now, those more complex features have to be rebuilt
iPad 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 we
their website and it just works.
                                                                don’t want to abandon all of those rich interactive features
                                                                that publishers need, which begins to explain our reasoning
Customization 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, branded
player experiences across every device. That means that the
advanced player customization you created with Brightcove       Here’s a dose of reality describing the current limitations of
Experience 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 be
lost 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 sharing
player experience and design no matter where they playback.           and geography are still to come. Right now, data about
The same is true of our support for playlist players: the             streams, player loads, and bandwidth usage for HTML5
experience 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




                                                                      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 recommend
So for the time being (as of January 2011), we’re defaulting to
                                                                      H.264 base on quality. For more detail, check out our video
Flash with fallback support for HTML5 in order to maintain the
                                                                      source file specifications and recommendations.
rich set of features we offer to publishers. That will remain the
case until we can build out these features for HTML5 playback,
                                                                      Brightcove’s smart player feature has pretty much the same
all 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 of
these 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




HTML5 Fact v. Fiction                                               Conclusion

If 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 is
dispel some of the misconceptions that have emerged from            leading the way in supporting HTML5 video experiences
the buzz about HTML5:                                               for our publishers. HTML5 is here to stay, but it is still in its
                                                                    infancy. The Flash platform support more advanced, mature
Fiction: HTML5 kills Flash and plug-ins.                            interactions and integrations, and that’s why we believe
Fact: Though HTML5 standards aim to natively integrate              it’s important for website owners to develop a strategy for
the media types that Flash came to support over the last            utilizing both approaches.
decade, the fragmentation surrounding codecs and container
standards for video in the browser will push many publishers
to continue defaulting to Flash experiences that work almost
anywhere.


Fiction: HTML5 video is ready for prime time.
Fact: This true for basic playback. But for more advanced
and sophisticated video experiences that our customers have
come to expect, there’s a lot of development work to be done
to 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 that
covered, you can playback on any iOS device. However, H.264
won’t playback natively in Firefox or Chrome going forward.
Therefore, iPad playback doesn’t necessarily equate to
complete HTML5 video compatibility; you’re only part of the
way there if you haven’t supported WebM/Ogg for other open
source 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 really
about encompassing all rich-media interactive experiences
without the need for plug-ins. That’s why HTML5 includes
along with <video> the <audio> and <canvas> tags, and
supports interactive behaviors like drag and drop.




© 2011 Brightcove Inc. All rights reserved.
12




HTML5 Resources

If we’ve whet your appetite and you are eager to learn more,
here is a collection of some of the best resources we have
found to explain the state of HTML5 today, along with some
tools to help you get started supporting HTML5 video with
Brightcove.


HTML5 Context                                                       More Examples and Source Code
The Future of Web Content – HTML5, Flash & Mobile Apps,             HTML5 Showcase, Apple
TechCrunch, Jeremy Allaire
                                                                    HTML5 Studio, Google
Dive Into HTML5, Mark Pilgrim

The Web Is Reborn, Technology Review, Bobbie Johnson
(log-in required)
                                                                    HTML5 Test Tools
                                                                    HTML5 Support Test, Brightcove
The Present and Future of HTML5 Video Experiences,
Jeff Whatcott                                                       Browser Video Compatibility, caniuse.com

WebM and The New Online Video Landscape, Jeff Whatcott

                                                                    Brightcove Technical Documentation
Customer Examples of HTML5 Video                                    Video Tutorial: HTML5 Smart Players

Andrew Zuckerman                                                    Delivering Video with HTML5 and Smart Players

Arrojo Education                                                    Setting Your HTML5 Video Delivery Options

SPIN Magazine                                                       Video Test for HTML5

The New York Times

Thumb Magazine

Time Inc.

Warehouse




                                                  One Cambridge Center        617 674 6500     tel             www.brightcove.com
                                                  Cambridge, MA 02142         617 395 8352     fax

Más contenido relacionado

La actualidad más candente

Html5 overview
Html5 overviewHtml5 overview
Html5 overview
appbackr
 
The Onset of Connected TV
The Onset of Connected TVThe Onset of Connected TV
The Onset of Connected TV
jonhewson
 
Avaya esna tech uc cloud v team sales training 02082012 final w feature matrix
Avaya esna tech uc   cloud v team sales training 02082012 final w feature matrixAvaya esna tech uc   cloud v team sales training 02082012 final w feature matrix
Avaya esna tech uc cloud v team sales training 02082012 final w feature matrix
kinakoGono
 
Ecommerce Report on Online Videos
Ecommerce Report on Online VideosEcommerce Report on Online Videos
Ecommerce Report on Online Videos
Puneet Gupta
 

La actualidad más candente (10)

Html5 overview
Html5 overviewHtml5 overview
Html5 overview
 
Breizh camp adobe flex et les mobiles
Breizh camp   adobe flex et les mobilesBreizh camp   adobe flex et les mobiles
Breizh camp adobe flex et les mobiles
 
Jax2001 adobe keynote
Jax2001 adobe keynoteJax2001 adobe keynote
Jax2001 adobe keynote
 
The Onset of Connected TV
The Onset of Connected TVThe Onset of Connected TV
The Onset of Connected TV
 
Avaya esna tech uc cloud v team sales training 02082012 final w feature matrix
Avaya esna tech uc   cloud v team sales training 02082012 final w feature matrixAvaya esna tech uc   cloud v team sales training 02082012 final w feature matrix
Avaya esna tech uc cloud v team sales training 02082012 final w feature matrix
 
DB2 Storage Engine for MySQL and Open Source Applications Session
DB2 Storage Engine for MySQL and Open Source Applications SessionDB2 Storage Engine for MySQL and Open Source Applications Session
DB2 Storage Engine for MySQL and Open Source Applications Session
 
Developing mobile applications for i using open source tools Venna 2012
Developing mobile applications for i using open source tools  Venna 2012Developing mobile applications for i using open source tools  Venna 2012
Developing mobile applications for i using open source tools Venna 2012
 
Jax 2011 keynote
Jax 2011 keynoteJax 2011 keynote
Jax 2011 keynote
 
Ecommerce Report on Online Videos
Ecommerce Report on Online VideosEcommerce Report on Online Videos
Ecommerce Report on Online Videos
 
Adobe flex at jax london 2011
Adobe flex at  jax london 2011Adobe flex at  jax london 2011
Adobe flex at jax london 2011
 

Destacado (6)

Spiritual Dehydration
Spiritual DehydrationSpiritual Dehydration
Spiritual Dehydration
 
The spider in the palaces
The spider in the palacesThe spider in the palaces
The spider in the palaces
 
The walls
The wallsThe walls
The walls
 
Comfort one another
Comfort one anotherComfort one another
Comfort one another
 
Believe It Or Not
Believe It Or NotBelieve It Or Not
Believe It Or Not
 
Développer « l'expérience client » : Pour relever le défi client dans la dist...
Développer « l'expérience client » : Pour relever le défi client dans la dist...Développer « l'expérience client » : Pour relever le défi client dans la dist...
Développer « l'expérience client » : Pour relever le défi client dans la dist...
 

Similar a HTML5 vidéo : Facts and fiction

HTML5: The next disruptive technology
HTML5:  The next disruptive technologyHTML5:  The next disruptive technology
HTML5: The next disruptive technology
Linda Jacobson
 
UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7
Hisham Mat Hussin
 
WebRTC APIs - API Strategy Conference Amsterdam (March 2014)
WebRTC APIs - API Strategy Conference Amsterdam (March 2014) WebRTC APIs - API Strategy Conference Amsterdam (March 2014)
WebRTC APIs - API Strategy Conference Amsterdam (March 2014)
Luis Borges Quina
 

Similar a HTML5 vidéo : Facts and fiction (20)

HTML5, the Evolution of Smart Media
HTML5, the Evolution of Smart MediaHTML5, the Evolution of Smart Media
HTML5, the Evolution of Smart Media
 
Html5
Html5Html5
Html5
 
HTML5
HTML5HTML5
HTML5
 
HTML5: The next disruptive technology
HTML5:  The next disruptive technologyHTML5:  The next disruptive technology
HTML5: The next disruptive technology
 
HTML5 - The Future in a Flash
HTML5 - The Future in a FlashHTML5 - The Future in a Flash
HTML5 - The Future in a Flash
 
The Next Web Generation
The Next Web GenerationThe Next Web Generation
The Next Web Generation
 
Html5 is ready now ready
Html5 is ready now readyHtml5 is ready now ready
Html5 is ready now ready
 
UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7
 
Migrating to HTML5, Migrating Silverlight to HTML5, Migration Applications t...
Migrating to HTML5,  Migrating Silverlight to HTML5, Migration Applications t...Migrating to HTML5,  Migrating Silverlight to HTML5, Migration Applications t...
Migrating to HTML5, Migrating Silverlight to HTML5, Migration Applications t...
 
Top 10 major benefits of html 5
Top 10 major benefits of html 5Top 10 major benefits of html 5
Top 10 major benefits of html 5
 
Pkewebrtc
PkewebrtcPkewebrtc
Pkewebrtc
 
The Rise of Flash Web Development
The Rise of Flash Web DevelopmentThe Rise of Flash Web Development
The Rise of Flash Web Development
 
Everything That You Need To Know About HTML5
Everything That You Need To Know About HTML5Everything That You Need To Know About HTML5
Everything That You Need To Know About HTML5
 
Should you say no to HTML5?
Should you say no to HTML5?Should you say no to HTML5?
Should you say no to HTML5?
 
Mobile & independent schools
Mobile & independent schoolsMobile & independent schools
Mobile & independent schools
 
How Open Data Can Enhance Interactive Television
How Open Data Can Enhance Interactive TelevisionHow Open Data Can Enhance Interactive Television
How Open Data Can Enhance Interactive Television
 
What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...What is future of web with reference to html5 will it devalue current present...
What is future of web with reference to html5 will it devalue current present...
 
HTML5 / Mobile Web
HTML5 / Mobile WebHTML5 / Mobile Web
HTML5 / Mobile Web
 
Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7Introduction to HTML5/CSS3 In Drupal 7
Introduction to HTML5/CSS3 In Drupal 7
 
WebRTC APIs - API Strategy Conference Amsterdam (March 2014)
WebRTC APIs - API Strategy Conference Amsterdam (March 2014) WebRTC APIs - API Strategy Conference Amsterdam (March 2014)
WebRTC APIs - API Strategy Conference Amsterdam (March 2014)
 

Más de Bertrand CHARLET

White paper : 21 century market research
White paper : 21 century market researchWhite paper : 21 century market research
White paper : 21 century market research
Bertrand CHARLET
 
Tools and trends in marketing technology
Tools and trends in marketing technologyTools and trends in marketing technology
Tools and trends in marketing technology
Bertrand CHARLET
 
Les salariés et la performance après la crise
Les salariés et la performance après la criseLes salariés et la performance après la crise
Les salariés et la performance après la crise
Bertrand CHARLET
 
Wave5 thesocialisationofbrands-report-101017073230-phpapp02
Wave5 thesocialisationofbrands-report-101017073230-phpapp02Wave5 thesocialisationofbrands-report-101017073230-phpapp02
Wave5 thesocialisationofbrands-report-101017073230-phpapp02
Bertrand CHARLET
 
Seodecollageimmediat.com wp content-uploads_2010_10_seo-decollage-immediat-20...
Seodecollageimmediat.com wp content-uploads_2010_10_seo-decollage-immediat-20...Seodecollageimmediat.com wp content-uploads_2010_10_seo-decollage-immediat-20...
Seodecollageimmediat.com wp content-uploads_2010_10_seo-decollage-immediat-20...
Bertrand CHARLET
 
Guide pratique creation_logo_entreprise
Guide pratique creation_logo_entrepriseGuide pratique creation_logo_entreprise
Guide pratique creation_logo_entreprise
Bertrand CHARLET
 

Más de Bertrand CHARLET (16)

Taking a “Crawl, walk, run”approach To cross-channel MarkeTing
Taking a “Crawl, walk, run”approach To cross-channel MarkeTingTaking a “Crawl, walk, run”approach To cross-channel MarkeTing
Taking a “Crawl, walk, run”approach To cross-channel MarkeTing
 
Pinterest
Pinterest Pinterest
Pinterest
 
Definitive Merchant Guide to Deals, Discounts and Offers
Definitive Merchant Guide to Deals, Discounts and OffersDefinitive Merchant Guide to Deals, Discounts and Offers
Definitive Merchant Guide to Deals, Discounts and Offers
 
Multi-channel retailing
Multi-channel retailingMulti-channel retailing
Multi-channel retailing
 
White paper : 21 century market research
White paper : 21 century market researchWhite paper : 21 century market research
White paper : 21 century market research
 
Social Media Metrics
Social Media MetricsSocial Media Metrics
Social Media Metrics
 
Livre blanc : Web Strategy 3.0
Livre blanc : Web Strategy 3.0Livre blanc : Web Strategy 3.0
Livre blanc : Web Strategy 3.0
 
Tools and trends in marketing technology
Tools and trends in marketing technologyTools and trends in marketing technology
Tools and trends in marketing technology
 
The State Of Customer Experience, 2010
The State Of Customer Experience, 2010The State Of Customer Experience, 2010
The State Of Customer Experience, 2010
 
Livre blanc : Améliorer la rentabilité des campagnes marketing grâce à l’anal...
Livre blanc : Améliorer la rentabilité des campagnes marketing grâce à l’anal...Livre blanc : Améliorer la rentabilité des campagnes marketing grâce à l’anal...
Livre blanc : Améliorer la rentabilité des campagnes marketing grâce à l’anal...
 
Les salariés et la performance après la crise
Les salariés et la performance après la criseLes salariés et la performance après la crise
Les salariés et la performance après la crise
 
Affinitiz communautesdemarques
Affinitiz communautesdemarquesAffinitiz communautesdemarques
Affinitiz communautesdemarques
 
Wave5 thesocialisationofbrands-report-101017073230-phpapp02
Wave5 thesocialisationofbrands-report-101017073230-phpapp02Wave5 thesocialisationofbrands-report-101017073230-phpapp02
Wave5 thesocialisationofbrands-report-101017073230-phpapp02
 
Www.eduqua.ch pdf manuel_eduqua
Www.eduqua.ch pdf manuel_eduquaWww.eduqua.ch pdf manuel_eduqua
Www.eduqua.ch pdf manuel_eduqua
 
Seodecollageimmediat.com wp content-uploads_2010_10_seo-decollage-immediat-20...
Seodecollageimmediat.com wp content-uploads_2010_10_seo-decollage-immediat-20...Seodecollageimmediat.com wp content-uploads_2010_10_seo-decollage-immediat-20...
Seodecollageimmediat.com wp content-uploads_2010_10_seo-decollage-immediat-20...
 
Guide pratique creation_logo_entreprise
Guide pratique creation_logo_entrepriseGuide pratique creation_logo_entreprise
Guide pratique creation_logo_entreprise
 

Último

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 

HTML5 vidéo : Facts and fiction

  • 1. HTML5 Video Facts & Fiction Brightcove, Inc. January 2011 Whitepaper The next generation of World Wide Web Consortium (W3C) standards promises to usher in new levels of interactivity and interoperability on the Web, but the transformation won’t happen overnight. This report covers everything you need to know about the current and future state of one of the most important emerging standards for cross-platform online video delivery, HTML5.
  • 2. Contents Why Now? 4 So what is HTML5, exactly? 5 The Promise of the HTML5 <video> tag 5 The Reality Today: Fragmentation and Complexity 6 So Why Would I Want To Support HTML5 Today, if it’s So Complicated? 7 There’s Got to be A Better Way… 8 Brightcove and HTML5 Video 8 Current Limitations of HTML5 9 Best Practices: Source Files for HTML5 Video with Brightcove 10 HTML5 Fact v. Fiction 11 Conclusion 11 HTML5 Resources 12 © 2011 Brightcove Inc. All rights reserved.
  • 3. 3 The media is buzzing about the promise of what HTML5 has to offer for the future of online interactive experiences, but buzz often 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-proof their online media investments. We want to set the record straight to separate the fact from the fiction. Does HTML5 kill Flash and plug-ins? Is HTML5 video ready for prime time? We’ll cover these questions and more in this report. © 2011 Brightcove Inc. All rights reserved.
  • 4. 4 Why Now? The nearly ubiquitous state of rich, interactive content on These factors demonstrate just how much content on the the Web has led us to a point of transition that inspired the Web has changed and matured from the static HTML Web working group at the W3C standards body to reconsider the pages of the mid-to-late 1990s, when HTML standards were fundamental 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 The promise of the HTML5 So what is HTML5, exactly? <video> tag The MIT Technology Review puts it well: “HTML5 is taking HTML5’s promise lies in the idea that video is now thought of the best of how the Web works and making it standard.” In as a central asset for Web content, and is expressed as such in moving from a static to a more interactive, media-rich Web, hypertext markup language. We’ve known for a long time that HTML5 is attempting to explicitly build in all the interactive, video is important, but it was never integrated into the fabric media-heavy features that have since emerged, namely audio of the Web (hypertext markup language) in an intentional way and 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 playback was last updated in 2000. HTML5 aims to make all features on for any device via the browser. HTML5 <video> tag removes the Web interoperable, regardless of what operating system any need for plug-ins to drive rich media experiences on the or 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 specific to understand that this collection of bandwidth intensive, rich- apps by allowing mobile Web scalability for all platforms media assets addresses the most significant progress and and form factors. change that has occurred on the Web over the last decade. In HTML5 specifications, these multimedia assets are no longer Eliminate need for downloads and updates of proprietary afterthoughts, requiring add-on plug-ins to support their plug-ins with open standards-based video playback. playback. Instead, these assets are considered fundamental elements 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 The Reality Today: Fragmentation and Complexity While the standard has noble aims, HTML5 is far from being a And with Google Chrome’s recent announcement that they be-all and end-all solution for interoperability on the Web, at do not plan to support native playback for H.264 codecs in least 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 desktop HTML5’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 eliminates one layer of expression between the video and the browser, it There are a lot of reasons that standards bodies haven’t doesn’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 for A Standard without Standards its high quality, the fees that may be required for commercial Why is that? Well, it’s because there’s no one standard set of use by the consortium of license holders known as MPEG containers and codecs that works across every browser. So LA prevent it from being sanctioned wholeheartedly by the with 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 we don’t have a standard video file type to point to that will work on any device and any browser that you read a Web page with. High Quality/ Efficiency Let’s look at the browser/codec relationship grid as it stands today: Low Quality/ Native video format support Efficiency Ogg Theora H.264 VP8 WebM Internet 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 So why would I want to support HTML5 today, if it’s so complicated? Flash Entrenchment Because HTML5 in Chrome will require WebM codecs, we Given that complicated, multi-stepped formula for supporting believe you’ll see a lot of publishers defaulting to Flash for HTML5 video fallback for any device, you might be asking desktop 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 for Apple devices). The net-net: this WebM announcement will Well, there are a few good reasons: result in further entrenched use of Flash for Chrome desktop and mobile environments because it works today, and will Mobile Video: If you care at all about giving mobile continue 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 consider The 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, and The same enhancements that aim to make the Web more building on emerging standards can feel like an uncertain video-friendly are for the time being complicating matters for foundation, we’re certain that it’s the way forward, and publishers more than ever before. Here’s what Mark Pilgrim it’s worth getting a head start to future proof online suggests you do to create a series of fallback options for your media investment as adoption spreads. You can weigh HTML5 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 workflow will 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 diveintohtml5.org/video.html) online. Sound complicated? It is. © 2011 Brightcove Inc. All rights reserved.
  • 8. 8 There’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 Encoding So 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 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, but one HTML5 enabled player live. That’s because Brightcove publishers want so much more than just playback. What has made it incredibly easy to convert existing players over they want is a holistic video experience, which includes the to 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 find that some of our favorite customer examples that support Right now, those more complex features have to be rebuilt iPad 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 we their website and it just works. don’t want to abandon all of those rich interactive features that publishers need, which begins to explain our reasoning Customization 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, branded player experiences across every device. That means that the advanced player customization you created with Brightcove Here’s a dose of reality describing the current limitations of Experience 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 be lost 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 sharing player experience and design no matter where they playback. and geography are still to come. Right now, data about The same is true of our support for playlist players: the streams, player loads, and bandwidth usage for HTML5 experience 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 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 recommend So for the time being (as of January 2011), we’re defaulting to H.264 base on quality. For more detail, check out our video Flash with fallback support for HTML5 in order to maintain the source file specifications and recommendations. rich set of features we offer to publishers. That will remain the case until we can build out these features for HTML5 playback, Brightcove’s smart player feature has pretty much the same all 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 of these 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 HTML5 Fact v. Fiction Conclusion If 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 is dispel some of the misconceptions that have emerged from leading the way in supporting HTML5 video experiences the buzz about HTML5: for our publishers. HTML5 is here to stay, but it is still in its infancy. The Flash platform support more advanced, mature Fiction: HTML5 kills Flash and plug-ins. interactions and integrations, and that’s why we believe Fact: Though HTML5 standards aim to natively integrate it’s important for website owners to develop a strategy for the media types that Flash came to support over the last utilizing both approaches. decade, the fragmentation surrounding codecs and container standards for video in the browser will push many publishers to continue defaulting to Flash experiences that work almost anywhere. Fiction: HTML5 video is ready for prime time. Fact: This true for basic playback. But for more advanced and sophisticated video experiences that our customers have come to expect, there’s a lot of development work to be done to 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 that covered, you can playback on any iOS device. However, H.264 won’t playback natively in Firefox or Chrome going forward. Therefore, iPad playback doesn’t necessarily equate to complete HTML5 video compatibility; you’re only part of the way there if you haven’t supported WebM/Ogg for other open source 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 really about encompassing all rich-media interactive experiences without the need for plug-ins. That’s why HTML5 includes along with <video> the <audio> and <canvas> tags, and supports interactive behaviors like drag and drop. © 2011 Brightcove Inc. All rights reserved.
  • 12. 12 HTML5 Resources If we’ve whet your appetite and you are eager to learn more, here is a collection of some of the best resources we have found to explain the state of HTML5 today, along with some tools to help you get started supporting HTML5 video with Brightcove. HTML5 Context More Examples and Source Code The Future of Web Content – HTML5, Flash & Mobile Apps, HTML5 Showcase, Apple TechCrunch, Jeremy Allaire HTML5 Studio, Google Dive Into HTML5, Mark Pilgrim The Web Is Reborn, Technology Review, Bobbie Johnson (log-in required) HTML5 Test Tools HTML5 Support Test, Brightcove The Present and Future of HTML5 Video Experiences, Jeff Whatcott Browser Video Compatibility, caniuse.com WebM and The New Online Video Landscape, Jeff Whatcott Brightcove Technical Documentation Customer Examples of HTML5 Video Video Tutorial: HTML5 Smart Players Andrew Zuckerman Delivering Video with HTML5 and Smart Players Arrojo Education Setting Your HTML5 Video Delivery Options SPIN Magazine Video Test for HTML5 The New York Times Thumb Magazine Time Inc. Warehouse One Cambridge Center 617 674 6500 tel www.brightcove.com Cambridge, MA 02142 617 395 8352 fax