Placeholder Image

字幕表 動画を再生する

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