html 5 video

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


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

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 35%

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

NewsgroupsDNS

Telnet

FTP

Email

Web

Other

Peer to Peer

Video 51%of Traffic

Source: Limelight Networks


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!


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


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.


8

Brightcove and HTML5 Video

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

streaming. In the future, Brightcove will also automatically

generate both H.264 and WebM renditions of all video content

uploaded to the Brightcove 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.

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

your existing players can automatically load in Flash or HTML5

mode without any custom work or additional JavaScript on

your part.

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

UserExperience

Extensibility

Analytics

QualityDelivery

Advertising

Security


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, and 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, data about

streams, player loads, and bandwidth usage for HTML5

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.

As of January 2011, 67% of Brightcove 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.


10

Best Practices: Source Files for HTML5 Video with Brightcove

If you are ready to get started with HTML5 video with

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

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

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.


11

Conclusion

HTML5 is an exciting development in the history of rich-

media content on the Web, and that’s why Brightcove 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.

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