and I work for YouTube. I'm a developer advocate.

Um, I have Greg Schechter and Jeffrey Posnick

here with me today.

And, uh, we'll talk about, uh, YouTube iframe player

and the future of embedding.

So thank you very much for coming.

Um, there's another one offered today.

Um, we will talk about,

you know, what the iframe player is

and why we introduced it.

Really what is the problem that we were trying to solve?

Um, Greg will cover, uh, HTML5 Video Playback,

some of the challenges that he has faced

implementing the player,

as well as the actual API, um, design and implementation.

So if you're thinking about introducing

you're own JavaScript-based API on top of an iframe,

he'll highlight some design choices

that--that you might consider in your own designs.

Uh, we'll talk a little bit more about, you know,

what are the differences between the, um,

iframe JavaScript API

that we expose now

and the existing ActionScript 3 JavaScript API,

and what this means to application developers.

And then finally,

Jeff created a very nice sample player application

for this occasion.

And he will walk you through the implementation

of--of his HTML5-based, uh, video player,

so that you could reuse that code

in your own applications.

Uh, before we start,

um, if you would like to live-tweet about this session,

here are the hash tags--

#io2011, #YouTube.

And then we would like you to submit some feedback for us.

The QR code is right here

and the show uplink as well on this page.

So, uh, you know,

this is the summary of the session, really.

Uh, you know, what we're trying to do

is--is to let the embed, not the embedder

figure out the complexity of web video.

Uh, so as you all know, what we're facing

is really a platform- fragmentation problem right now.

There's a lot of new platforms,

new operating systems coming online,

especially in the-- in the mobile space,

so then in order to provide,

um, platform-independent portable video playback,

uh, the embedder actually is facing quite a few choices.

And we're trying to simplify this complexity.

So, uh, as I mentioned, both--

you know, we see new platforms, and the encoding standards

supported by these platforms also vary.

So we have H.263 to H.264,

uh, WebM VP8, and so forth.

And then the actual embed technology

also, um, is different depending on the platform.

So historically we had AS2--AS2.

Um, there's some RTSP streaming support for feature phones

that we still have, AS3, HTML5.

So all that actually adds complexity

whenever one wants to include video in a web page

or web application or a native application.

So the problem that we're trying to solve here

is to really provide a simple embed

that will work across all the range of platforms

and hopefully future-proof the embed,

so once you embed a video in your application once,

as new platforms come online,

we'll take the responsibility of making sure

that the video playback is really designed

for that platform, works well,

and you don't get a black box saying, you know,

you need to install this or that plug-in and so forth.

In the lower left I have a syntax example

of the iframe player,

so for those of you who have used it before,

it should be pretty familiar.

For those of you that haven't, one thing to notice--

there's nothing here

about the underlying video implementation technology.

So just by putting that snippet of code

in your web application, web page, whatever,

uh, the only thing it instructs us to do

is to actually choose

the optimal video playback technology

for your device

with an encoding that your device can actually support

and play the video back,

so you really don't have to worry about the complexity.

Uh, so next we'll talk a little bit more

about the design decisions

that drove the iframe player implementation,

as well as, you know, how we ended up

exposing the player API to application developers,

much like what we have done

with the Flash player in the past.

So now I will hand it off to Greg,

who--who will dig into the details.

Schechter: Thanks, Jarek. Uh, so I'm Greg Schechter.

I'm one of the engineers that works on the HTML5 player

and the iframe embed.

And, uh, you know, HTML5-- it's new. It's awesome.

You've been seeing all these cool demos.

But Flash has sort of been in the business

for quite some time.

Uh, so we kind of wondered, like,

why should we build this HTML5 player?

We've got this great Flash one.

Uh, you know, what makes HTML5 better?

And so we looked--we took a look at, like, both platforms,

and we looked at performance, accessibility,

something I call "device-ability,"

and all sorts of things,

and tried to compare the two, uh, platforms.

So the first thing we sort of looked at

is, like, the different features.

Uh, what does Flash provide,

and what does HTML5 have as well?

So one of the first things that's really important

that Flash has was robust video streaming.

In order to provide

this really great, excellent user experience,

we need to have, uh, fine control over buffering

and being able to change the quality.

Uh, we also want to be able to jump

to any part of the video, when the user's seeking.

And HTML5 doesn't quite have this fine-tuning yet.

Another important thing is content protection.

Uh, we don't own all of our contents.

Uh, you might have heard

that, uh, we just launched all these great video rentals.

And, uh, we've got to make sure that our content is secure.

And so, uh, Flash has a protocol for this,

RTMPE, that's, like, built in, easy to do.

And HTML5 doesn't have

an accepted standard for this yet.

After that, the sort of full screen--

uh, when I'm watching my favorite cat videos,

one thing that's really important

is I want them full screen and in HD.

And, uh, we-- we don't really have

an API to do this yet.

WebKit does have something in its nightlies.

And, uh, and the code for that is actually pretty simple.

It works pretty well.

Uh, and so it looks a little bit like this.

You can grab any elements.

Uh, so in our case, we'd grab our video player.

And we would request that it goes to full screen.

And then once it gets triggered,

we can do whatever we want with it,

you know, make it larger, change our buttons,

and--and so forth.

And so eventually, because this is in WebKit,

this will be available in Chrome hopefully very soon.

Uh, another thing that's important

is camera and microphone access.

A lot of our users come to-- come to YouTube,

and they just want to film, uh, talking to, you know,

the--the millions of viewers, uh, right there.

And, uh, HTML5 doesn't have this yet.

Uh, but Flash-- you know, it's there.

Another interesting thing is formats.

So with Flash, it's pretty much gonna--

if--if the device supports Flash,

you can play your Flash videos without any issues.

Uh, HTML5--we actually have to support

two different formats. We have H.264 and WebM.

And so browsers, uh, some browsers will support both.

At the moment, Chrome will support both.

But you know, then you get browsers like Firefox,

which will only support WebM,

and IE, which will only support H.264.

Now we have, uh, all of our videos are encoded in H.264,

and most of them are in WebM at the moment.

But it's taken a while, 'cause it's such a large database

to get through and make all these additional encodings.

Uh, so now why is HTML5 so great?

And, uh, it's--we've got this open-source technology--

open source browsers, players, and codecs,

which really allows for some great, uh,

development in the space,

and making it really fast-paced and changing really quickly.

It also should have lower latency

when we're watching these videos.

We don't have to start up this plug-in.

It's just native in the browser. It should be a lot faster.

And this is really evident, uh, in the iframe,

which I'll--I'll show later.

And, uh, so we're--we're hoping for better performance,

uh, with these different encodings.

Uh, we were hoping to get better performance for the videos

and just fidelity.

Just it works smoother without worrying

about our code screwing up the video playback.

Another great thing is accessibility.

And, uh, there's a few other accessibility talks here

that go into some really detailed stuff here.

Um, one of the--the talks that happened earlier

which was great was all about captions.

And, um, you know, I really like having captions

on my--on my cat videos.

This is one of my favorite comic strips there.

But, um, so one of the features that's important to me

is actually navigating, uh, in the browser.

And because it's native,

I can just tab around in the page.

So let me show you a quick demo.

Um, so this is the--

you know, this is YouTube, and I got the Flash player here.

And I start tabbing around the page,

and, uh, eventually I'm trying to get into the player,

but I just sort of jump below it, and I'm--

my tab focus is down here at the moment--

um, and I can't get into the player.

But if I click my mouse on it,

um, you know, I'll-- I'll give focus to the player.

and then I can tab around and use the controls,

um, but I'm trapped. I can't get outside.

I can't start to interact with the rest of the page again.

One of the great things that's great about HTML5

is, uh, I can tab around in the page,

and then I can jump right into the player,

and I can use my keyboard to start playing the video.

Um, and then if, you know,

I want to move on to the rest of the page,

I can just continue to tab around,

and, uh, and I'm out interacting with the page again.

And so, um, you know, different user agents

are gonna have, um, have to build, uh, APIs

for having these-- this special video handling,

uh, for these-- for the video tag.

Um, but then screen readers, any screen reader you have

will be able to access that,

and you'll have, you know, accessible videos.

Uh, so next thing I want to talk about

is device-ability.

And that's--basically what I mean by that is

where do these platforms that work in Flash--

where can you watch Flash videos,

and where can you watch HTML5 videos?