HTML5 Video Facts & Fiction

VIInternet and Web Development

Sep 26, 2011 (6 years and 1 month ago)

836 views

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.

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.
HTML5 Video
Facts & Fiction
Brightcove, Inc.

January 2011

Whitepaper
© 2011 Brightcove Inc. All rights reserved.
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 Video Cloud and HTML5 Video
8
Current Limitations of HTML5
9
Best Practices: Source Files for HTML5 Video with Brightcove Video Cloud
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
These factors demonstrate just how much content on the
Web has changed and matured from the static HTML Web
pages of the mid-to-late 1990s, when HTML standards were
first widely adopted. Since then many tools and plug-ins have
popped up to support rich content behaviors on the Web
that were not described in early HTML syntax. As bandwidth
and processing power increased, heavier audio- and video-
based content experiences became more common, but a
collection of proprietary standards emerged, most of which
required unique plug-ins to “read” those different file types
not recognized by HTML.
The ubiquity of video in Web and mobile browsing now
becomes the main driver for evolving the standards to
support the rich media experiences that have become so
commonplace, so central to the Web. Standards bodies have
called for a complete refresh of the way these elements are
expressed on the Web.
Why Now?
The nearly ubiquitous state of rich, interactive content on
the Web has led us to a point of transition that inspired the
working group at the W3C standards body to reconsider the
fundamental language for expressing content on the Web.
Video makes up the largest portion of traffic on the
Internet today.

Cisco
predicted that global Internet video
traffic would surpass global peer-to-peer traffic by the
end of 2010. Limelight also claims that video traffic online
accounts for up to 51% percent of all US traffic online.
Adoption of mobile browsing is on the rise, and video
is a big part of that browsing activity.
More than 39%
percent of US mobile subscribers have used their
phone’s browser (
comScore Nov 2010
). Research from
Bytemobile suggests that
video will take up 60% of all
mobile data in 2011
.
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.
1995 2010
Newsgroups
DNS
Telnet
FTP
Email
Web
Other
Peer to Peer
Video 51%
of Traffic
Source: Limelight Networks
© 2011 Brightcove Inc. All rights reserved.
5
The promise of the HTML5
<video> tag
HTML5’s promise lies in the idea that video is now thought of
as a central asset for Web content, and is expressed as such in
hypertext markup language. We’ve known for a long time that
video is important, but it was never integrated into the fabric
of the Web (hypertext markup language) in an intentional way
until this update.
HTML5 aims to improve interoperability of Web experiences.
By making <video> syntax standard across all browsers,
publishers will be able to simplify and standardize playback
for any device via the browser. HTML5 <video> tag removes
any need for plug-ins to drive rich media experiences on the
Web. HTML5 makes media more “native” to the browser.
In theory, HTML5 aims to have the following impacts:

Curtail fragmentation of device/operating system specific
apps by allowing mobile Web scalability for all platforms
and form factors.

Eliminate need for downloads and updates of proprietary
plug-ins with open standards-based video playback.
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...
So what is HTML5, exactly?
The
MIT Technology Review
puts it well: “HTML5 is taking
the best of how the Web works and making it standard.” In
moving from a static to a more interactive, media-rich Web,
HTML5 is attempting to explicitly build in all the interactive,
media-heavy features that have since emerged, namely audio
and video playback.
HTML5 is the new standard for structuring and presenting
content of any kind on the World Wide Web. This is the first
major update to the standard from the W3C since HTML 4.01
was last updated in 2000. HTML5 aims to make all features on
the Web interoperable, regardless of what operating system
or browser you use to access the Web.
Most importantly is that HTML5 introduces unique syntax
tags for multi-media assets, namely <video>, <audio>, and
<canvas>. We’ll be focusing on <video> here, but it’s important
to understand that this collection of bandwidth intensive, rich-
media assets addresses the most significant progress and
change that has occurred on the Web over the last decade. In
HTML5 specifications, these multimedia assets are no longer
afterthoughts, requiring add-on plug-ins to support their
playback. Instead, these assets are considered fundamental
elements of content expression on the Web!
© 2011 Brightcove Inc. All rights reserved.
6
And with Google Chrome’s recent announcement that they
do not plan to support native playback for H.264 codecs in
the <video> tag, this means that the video file that plays on
an iPhone will soon not be able to play on Chrome desktop
browsers unless wrapped (once again) in Flash plug-ins.
There are a lot of reasons that standards bodies haven’t
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
its high quality, the fees that may be required for commercial
use by the consortium of license holders known as MPEG
LA prevent it from being sanctioned wholeheartedly by the
standards bodies that favor open (i.e. free) standards.
The Reality Today:
Fragmentation and Complexity
While the standard has noble aims, HTML5 is far from being a
be-all and end-all solution for interoperability on the Web, at
least for the time being.
HTML5’s biggest claim is to remove the need for proprietary
plug-ins to initiate playback on the Web. While that eliminates
one layer of expression between the video and the browser, it
doesn’t actually simplify everything just yet.
A Standard without Standards
Why is that? Well, it’s because there’s no one standard set of
containers and codecs that works across every browser. So
with HTML5 we’ve removed one layer in the stack for video
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.
Let’s look at the browser/codec relationship grid as it stands
today:
Native video format support
<video> understood, but not all values
are supported or are experimental
<video> fully supported
<video> element ignored
Ogg Theora H.264 VP8 WebM
Internet Explorer No 9.0 Depends
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
High Quality/
Efficiency
Low Quality/
Efficiency
Proprietary Free & Open
© 2011 Brightcove Inc. All rights reserved.
7
So why would I want to
support HTML5 today, if it’s

so complicated?
Given that complicated, multi-stepped formula for supporting
HTML5 video fallback for any device, you might be asking
yourself, “Why would I bother with HTML5 at this point?”
Well, there are a few good reasons:
Mobile Video:
If you care at all about giving mobile
users a quality Web browsing experience similar to what
they would find on a desktop then you must consider
supporting HTML5 video playback. Some might take the
approach of delivering video through proprietary mobile
apps. But developing apps for multiple mobile platforms
can be just as complex as building sites with fallback
plans for different standards requirements. In particular,
HTML5 video is essential if you hope to reach consumers
browsing on the iPhone, iPad, and iPod touch.
Emerging Standards:
While it’s frustrating that some
of these details (like a recommended codec) in the
HTML5 standard haven’t been fully hashed out, and
building on emerging standards can feel like an uncertain
foundation, we’re certain that it’s the way forward, and
it’s worth getting a head start to future proof online
media investment as adoption spreads. You can weigh
the trade-offs for yourself, but the sacrifices are small in
return for keeping pace with the fast-growing adoption
curve.
Blossoming Ecosystem:
In many ways, HTML5 is today
where Flash video was in 2002. All the third-party
integration and broad-based feature support that
made Flash robust and allowed Internet video to take
off are only just beginning to emerge on the HTML5
standard. That can be frustrating at times, but there
will undoubtedly be a similar ecosystem of innovation
and support to emerge around the HTML5 standard. It’s
therefore certainly worth getting a head start today with
an HTML5 strategy to make sure you’ll be ready to take
advantage of the ecosystem innovations as they come
online.
Flash Entrenchment
Because HTML5 in Chrome will require WebM codecs, we
believe you’ll see a lot of publishers defaulting to Flash for
desktop browser playback for the time being (which will still
be able to support H.264 video files that are also required for
Apple devices). The net-net: this WebM announcement will
result in further entrenched use of Flash for Chrome desktop
and mobile environments because it works today, and will
continue to work for at least the next several years.
The Fallback
So what does that mean practically? Well, Mark Pilgrim puts it
well in Dive into HTML5:
“There is no single combination of containers and codecs that
works in all HTML5 browsers. This is not likely to change in the
near future. To make your video watchable across all of these
devices and platforms,
you’re going to need to encode your
video more than once
.”
The same enhancements that aim to make the Web more
video-friendly are for the time being complicating matters for
publishers more than ever before. Here’s what Mark Pilgrim
suggests you do to create a series of fallback options for your
HTML5 video to work everywhere:
For maximum compatibility, here’s what your video workflow
will look like:
1.
Make one version that uses WebM (VP8 + Vorbis).
2.
Make another version that uses H.264 baseline video and
AAC “low complexity” audio in an MP4 container.
3.
Make another version that uses Theora video and Vorbis
audio in an Ogg container.
4.
Link to all three video files from a single <video> element,
and fall back to a Flash-based video player. - (http://
diveintohtml5.org/video.html)
Sound complicated? It is.
© 2011 Brightcove Inc. All rights reserved.
8
Brightcove Video Cloud and
HTML5 Video
Video Cloud began supporting HTML5-friendly playback
when we first started encoding with H.264 codecs in
anticipation of the iPad and iPhone requirements of our
biggest publishers. Since then, we’ve introduced a number of
features that make supporting HTML5 video ridiculously easy
(especially in contrast to that three-version fallback plan).
No-Sweat Encoding
You only need to upload one video source file to Video Cloud
to serve video to all of these different codecs; no need to
worry about encoding three plus video formats for every
HTML5 contingency.
Video Cloud 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
streaming. In the future, Video Cloud will also automatically
generate both H.264 and WebM renditions of all video content
uploaded to the Video Cloud service.
Smart Players
Now that you have the right renditions and codecs, how does
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.
Video Cloud’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 Video Cloud 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 your existing players can automatically load in Flash
There’s got to be a better way…
We thought the same thing. In fact, we’ve always felt that
way. We’ve always believed in the mantra that online video
should “just work.” To that end, we’ve also believed that
publishers producing content shouldn’t have to be the ones
worrying about standards compatibility and fallback plans.
In fact, Brightcove Video Cloud aims to shield you from the
fragmentation and complexity of these emerging standards.
So how to we do that? Let’s take a look:
WebM
H.264
Desktops
Smart Phones
Connected TVs
User
Experience
Extensibility
Analytics
Quality
Delivery
Advertising
Security
© 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,
playback is the foundation of a good video experience, but
publishers want so much more than just playback. What
they want is a holistic video experience, which includes the
elements like branded players, playlists, advertising, analytics,
audience profiling, calls to action, and content protection.
Right now, those more complex features have to be rebuilt
from the ground up to work in the HTML5 environment.
We’ve come a long way from just getting video to play, so we
don’t want to abandon all of those rich interactive features
that publishers need, which begins to explain our reasoning
for defaulting playback to Flash, with HTML5 as the fallback
where appropriate and needed.
Here’s a dose of reality describing the current limitations of
HTML5 video supporting these advanced features:

Analytics:
We have basic viewership reporting today,
but drill-down in to engagement and social sharing and
geography are still to come. Right now, Video Cloud
identifies streams for HTML5 playback, but player loads
and bandwidth usage are lumped together with data
from Flash mode.

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 Video Cloud smart
players and other ad partners that support HTML5
advertising delivery.
or HTML5 mode without any custom work or additional
JavaScript on your part.
As of January 2011, 67% of Video Cloud accounts have at least
one HTML5 enabled player live. That’s because Brightcove
has made it incredibly easy to convert existing players over
to HTML5 playback, and by default all new players created
since mid-August 2010 are automatically HTML5 compatible,
unless you opt out. In fact, we wouldn’t be surprised to find
that some of our favorite customer examples that support
iPad playback weren’t even worried about doing something
special for HTML5. They just put the player embed code on
their website and
it just works.
Customization and HTML5
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
Experience Markup Language (BEML) or the player skin and
style you designed with our point-and-click editor won’t be
lost when you switch over to HTML5 playback environments.
Our smart players make it possible to maintain the same
player experience and design no matter where they playback.
The same is true of our support for playlist players: the
experience is constant, no matter where it plays.
© 2011 Brightcove Inc. All rights reserved.
10
Best Practices:

Source Files for HTML5 Video
with Brightcove Video Cloud
If you are ready to get started with HTML5 video with Video
Cloud, we’re including a few tips for optimizing HTML5
playback.
HTML5 video tags work with the following: H.264 video
created with the MPEG4 codec, WebM video made with the
VP8 codec, or Ogg Theora video. H.264 and WebM offer
better video quality, and WebM is open source.
At Brightcove, we recommend encoding in H.264, because it
will work in both Flash and most HTML5 environments where
Flash will not work. We suggest 2 pass H.264 encoding with
keyframes at least every 6 seconds. The good news is that
you don’t have to work in that format. If you prefer something
else, Video Cloud can automatically take care of the
transcoding to H.264 for iOS playback. We just recommend
H.264 base on quality. For more detail, check out our video
source file specifications and recommendations.
Video Cloud’s smart player feature has pretty much the same
content requirements as any mobile video:

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 Video
Cloud’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.

Content Protection:
The HTML5 specification does
not cover or contemplate DRM to prevent content
theft. The lack of content protection in the standards
will add significant friction for major media companies
to deliver their content through HTML5 experiences.
Without established standards for content protection, the
industry will be forced to rely on fragmented, proprietary
solutions.

Live Streaming:
The HTML5 spec does not cover or
contemplate live streaming. Apple offers a proprietary
method, but that only works for iOS devices.

Captions:
A workable solution for captions is not covered
in the spec, and so it falls on developers and online video
platforms to implement this as a feature.
So for the time being (as of January 2011), we’re defaulting to
Flash with fallback support for HTML5 in order to maintain the
rich set of features we offer to publishers. That will remain the
case until we can build out these features for HTML5 playback,
all of which are very high priorities on our technical roadmap.
Refer to our
Product Updates
for more recent details on all of
these features.
© 2011 Brightcove Inc. All rights reserved.
11
Conclusion
HTML5 is an exciting development in the history of rich-media
content on the Web, and that’s why Brightcove Video Cloud
is leading the way in supporting HTML5 video experiences
for our publishers. HTML5 is here to stay, but it is still in its
infancy. The Flash platform support more advanced, mature
interactions and integrations, and that’s why we believe
it’s important for website owners to develop a strategy for
utilizing both approaches.
HTML5 Fact v. Fiction
If you’ve read this far, hopefully we’ve given you a sense of the
potential for and current limitations of HTML5 standards. Let’s
dispel some of the misconceptions that have emerged from
the buzz about HTML5:
Fiction: HTML5 kills Flash and plug-ins.

Fact:
Though HTML5 standards aim to natively integrate
the media types that Flash came to support over the last
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
More Examples and Source Code
HTML5 Showcase
, Apple
HTML5 Studio
, Google
HTML5 Test Tools
HTML5 Support Test
, Brightcove
Browser Video Compatibility
, caniuse.com
Brightcove Technical Documentation
Video Tutorial: HTML5 Smart Players
Delivering Video with HTML5 and Smart Players
Setting Your HTML5 Video Delivery Options
Video Test for HTML5
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 Video Cloud.
HTML5 Context
The Future of Web Content – HTML5, Flash & Mobile Apps,
TechCrunch
, Jeremy Allaire
Dive Into HTML5
, Mark Pilgrim
The Web Is Reborn
, Technology Review, Bobbie Johnson

(log-in required)
The Present and Future of HTML5 Video Experiences
,

Jeff Whatcott
WebM and The New Online Video Landscape
, Jeff Whatcott
Customer Examples of HTML5 Video
Andrew Zuckerman
Arrojo Education
SPIN Magazine
The New York Times
Thumb Magazine
Time Inc.
Warehouse

One Cambridge Center

Cambridge, MA 02142
617 674 6500 tel

617 395 8352 fax
www.brightcove.com