HTML5 vidéo : Facts and fiction

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.


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


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...


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


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.


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.


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.


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.


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.


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

HTML5 vidéo : Facts and fiction

More Related Content

What's hot (10)

Viewers also liked (6)

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

More from Bertrand CHARLET (16)

Recently uploaded (20)

HTML5 vidéo : Facts and fiction