Placeholder Image

Subtitles section Play video

  • Wilkiewicz: Hello, everyone. My name is Jarek Wilkiewicz,

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

  • And at the moment,

  • when we look at our HTML5-capable browsers,

  • uh, you know, we've got just under 40%

  • of, uh, of browser usage is HTML5-capable.