Powered by YouTube - Design Your Own YouTube Player


Uploaded by GoogleDevelopers on 17.07.2008

Transcript:
Stearns: My name's Geoff Stearns.
I work also on the syndication team.
I guess you're hearing lots of people
from syndication today.
I primarily work on the video player.
So normally when you would see
a YouTube video,
uh, on a Web site that is not YouTube,
it's probably playing back
in one of the players that I work on.
So we have a few different players.
I think you've heard a little bit about them.
I'm gonna talk about two players in particular.
One is the standard embedded player,
which is probably the one that you're all familiar with
and the one that you've seen,
you know, around on the Internet.
And then the chromeless player, which has probably
been mentioned a few times today already,
which is our sort of super customizable player.
So let's get started, I guess.
I guess first of all I wanted to talk
a little bit about the embedded player.
Now, the chromeless player--
Uh, well, let me back up.
So the embedded player generally, I feel,
would probably be okay for probably 99%
of your needs, in my opinion.
The chromeless player is exciting and all,
but the embedded player
really brings everything together.
So the embedded player, you guys have all seen it.
Let me show you a quick example of it
just to show a little demo here.
Oops, I already have this open.
So this here are a few examples
of videos embedded using our embedded player.
And you can see there's a couple different layouts
and color options you can make.
We can even watch a couple videos here
that are pretty funny.
Do we have audio?
Yes? No?
There it goes.
Yeah, I think they just turned it up.
[techno rock music]
[video game sounds of hitting and punching]
[shouting indistinctly]
[man growling]
[laughter]
So there's not really a lot of point in that.
I just wanted to show it to you. It's pretty funny.
Um...
The one thing to sorta get outta this
is you can see that with the embedded player
there's a lot of customization options, okay?
You can set the color of the control bar.
You can add a border around it if you want to.
These down here, we sorta call this the genie menu.
Although it used to look more like more of a genie thing.
Now it's just sort of a slide forward thumbnail menu.
You can enable this or disable this if you want.
A lot of people ask, you know--
I actually talked to someone recently
who said they really wanted to use the embedded player
but they hate how it shows these related videos
that could be, like, a competitor,
or it could be, you know, a random spornography
or something like that, and you might not want that.
And you can disable it.
So I'll go through that stuff in a minute.
Um, a couple other examples of videos
and just a couple of other videos that are kinda fun.
So we'll watch those.
[jingling sound]
[man speaking foreign language]
[bottles jingling "Mario Bros." theme song]
Stearns: Does anyone here have this much free time?
No?
[man speaking indistinctly]
Yeah?
I'd volunteer our parking garage
if anybody wants to do this later.
All right, so let's take a quick look at--
[audience chuckling]
Uh...
So let's take a quick look at the options
that you have available for the normal embedded player.
If you go to our YouTube site on the code.google.com site,
we have a couple of pages that relate just to the player thing.
So we have YouTube player tools here.
There's a page called "player parameters"
that talks about the different customizations you can do.
And then we have some JavaScript and Flash APIs
and the chromeless player stuff.
So this is, like, your one resource place
for anything you want to know about the players.
So quickly I'll step through this stuff.
This is a list of all the different parameters
you can use on the player.
And a lot of people sort of gloss over
or maybe don't realize that you can actually customize them.
And it's really easy to customize the player.
All you do is you go to the YouTube site.
Just give you a quick example here.
You pick the video that you want.
Grab the embed code here.
And when you stick it in your page,
or whatever you're putting it into here,
all you have to do is modify a few variables.
So you could notice there's the URL to the player
in two places here.
There's this one here.
And this has a few parameters.
Now this part right here is the actual URL to the player.
And if you just use that plain URL,
you'll just get the normal standard player
that's just the gray that you've probably seen a lot.
But all these other variables here, uh,
are extra things that you can customize.
And you can actually come in and change these.
So like color one, color two right here,
these are just hex values.
So you can set them to any hex value you want.
Color two is the color of the control bar,
and then color one is the color of the border
or sort of like the secondary color of the player
if you turn the border on.
HL is a language.
We support I don't know how many languages.
Maybe 18 different languages right now?
So you can actually tell the player
to be whichever language we support.
We're always adding new languages.
I think by default it's whatever user language
you used when you got the embed code.
FS is a new one that I haven't documented yet,
but I'll tell you guys about that in a second here.
Um, so that's how you edit that.
Let me go back to my page here.
All right, so really quickly I'm just gonna run through these,
'cause these are pretty useful for most people.
So the rel argument is, like I said earlier,
it's to turn on or turn off
the related videos in the player.
So either when you push the menu button
or when the video ends, if you set rel to zero,
then you don't see those related videos.
Autoplay just lets the player autoplay when it loads up.
You guys can see certain sites like Digg uses that one,
you load a video on Digg.
You can set it to loop.
So if you want to have a video just loop forever,
you can set loop to one and it'll loop forever.
All these values, if they're like a Boolean value,
it's either one or zero.
So make sure you don't put like "true" or "false" in there.
It actually has to be a one or a zero.
Enable JSAPI and player API ID are kinda special ones.
I'm gonna talk about those in a little bit.
Disable KB just disables the keyboard controls.
A lot of people don't know that the players
have some keyboard controls.
They're listed out here.
So you can use spacebar to play and pause the player.
Or you can use your left and right arrow keys
to jump ahead or jump back to the beginning.
And then up and down arrow keys
change your volume up and down.
EGM is kind of a weird one.
I don't want to spend too much time on that.
But it basically makes it so that
if you set EGM to one, when you hover over
the video player with your mouse,
it brings that little menu up over the video.
So it lets you kinda, I guess,
helps discoverability a little bit.
The border one or zero
turns on that border that's around the player.
And you can set that on or off.
And then color one, color two is what I already mentioned
for setting the colors.
And then there's a few other example usage here.
And there's another example of the video player
with a blue border.
So I think a lot of people,
they ask for the chromeless player.
But really this player is really, really flexible
and would probably suit most of your needs.
And then this way you don't have to build
your own control setup since we already have our,
you know, pretty standard controls already set up there.
Another thing to notice is that this site--
this player also allows you to set the player
any size you want.
So it doesn't have to be, like, a standard 4x3.
You can actually set it to, like, wide-screen
like the last video I showed you guys.
Or you can shrink it or make it bigger.
You know, pretty much whatever size you want,
the player will just fill whatever size you give it,
which is nice.
There's not a way to set the quality yet.
Sorry.
Um, let's see here.
All right, so let's go back.
So...
let me go back to my examples here.
Oops.
All right, one more video and then we'll move on.
This one's good.
So the FS parameter, actually it's not documented yet.
But I added full screen functionality
to the embedded player last week.
So you guys can now use your embeds.
If you just go and get the new code from the Web site,
you can watch stuff in full screen now.
man: A slightly larger balloon, an 80 inch.
Stearns: It looks like the projector's kinda
screwing it up a little bit.
But really it should-- it would fill the whole screen
if it was on a normal display.
man: I keep the rubber band with me.
Stearns: This guy's name is Billoon45,
and he's a balloon fetishist.
This was his second attempt at trying to climb
inside of a balloon.
[chuckles]
Gunther likes this guy.
This guy is basically like the patron saint
of the YouTube web developers for the most part.
man: Oh, forgot the glasses.
They gotta come off.
Well, my head's inside.
Whoa.
Stearns: I think there's only one end of it, I guess.
I think it's, like, a big South American weather balloon
or something like that.
He actually tells you what it is.
man: My arm.
My head's inside.
Whoa.
Darn it.
That's the last thing I need now.
Not fucking cooperating.
Oh, great.
I'm becoming trapped in the balloon.
Drat!
Oh, I hate this.
Oh, darn it.
Oh.
Blast it.
I can still breathe.
Hmm.
Hmm, I gotta get out of this balloon.
[groaning]
Drat it.
[groaning]
Let's find me a spot here.
[groaning]
Stearns: I think that's my favorite part right there
when he does the little shimmy.
man: I ripped the balloon.
Drat dog.
Hate that.
Stearns: This guy's awesome.
[audience chuckling]
This is fantastic.
All right.
He does a lot of confessionals too.
I highly recommend his channel. It's really good.
Um, it's Billoon45 is the name
if you guys want to look it up.
So anyway, so really quickly,
the full screen mode that's there now,
any new embeds that you grab from the YouTube site
should have the full screen embed.
But you do have to do a little bit of special stuff.
If you have, like, an existing Web site
that uses our embed code, you have to add
an allow full screen parameter and attribute
to your embed code.
And if you guys want to see what that looks like,
you can just grab any embed code from the YouTube site
and you'll see it in there.
And then there's another player parameter called FS.
And you set that to either one or zero
to either show or hide the actual full screen button.
So we do that because a lot of our old embed code
didn't have the "allow full screen" parameter.
So if we showed the button, the button just wouldn't work.
So in some cases we'll actually hide the button
on sites that don't support the full screen embed code.
So have some fun with that.
Um, all right.
It's hard to think after watching that video there.
Let's go back to the thing.
All right, so another thing that I want to talk about
is the JavaScript and Flash API.
So in the embedded player and in the chromeless player,
they both can support a JavaScript API
for controlling the player.
And they can also support a Flash API.
So if you're working with ActionScript,
you can load the player into your ActionScript app
and have pretty much full control
over the players that way.
The APIs are pretty much identical, with some exceptions
as to how you initialize the player
when you load it into a Flash app,
which I guess is probably to be expected a little bit.
I want to kinda briefly go over
the JavaScript API reference,
and I'll get more into this a little bit later.
So the key thing to know about, I guess,
for using the JavaScript API--
Let me actually show the demo first,
and then we'll get back into it.
So this is, like, a really quick demo page I set up.
This is actually linked off of the bottom
of the JavaScript reference page
on the code.google.com site.
So this is just a normal embedded player
embedded on a page.
And I have some HTML controls here
that enable JavaScript controls to the player.
So I can hit play,
and the player will start playing.
You have pretty good support over it.
I can hit pause.
You can mute it or un-mute it,
which I think my sound went away again.
But that's okay.
[rock music]
You can seek around within the player.
So you can seek to any time you want.
You can seek ahead to, uh,
say, like, 150 seconds.
So you can see ahead to points in the video
that haven't loaded yet.
So if you guys have noticed,
YouTube uses sort of like a custom streaming method,
I guess you would call it.
All of our videos are progressive download.
But the way that we serve them
is that we can actually start playing them
from any point in the video.
So you can actually jump ahead in the video
and start playing points
that haven't actually downloaded yet.
And it'll just make a new request to the server
and start downloading it.
And you can see that happening here where I jumped ahead.
Or I can, like, jump back to here that hasn't loaded,
and it'll just jump to that point and start loading.
So the JavaScript API along with, you know,
just the player controls give you access to that.
So you could actually have a player that loads,
start playing it from the middle of the video
if you wanted to, and let it play, like, a segment
and then stop it or whatever.
So you can do lots of really fine granular control there.
And then you can see down here
I have some numbers being put out here.
So one of them is the duration
where I grab the duration from the player.
The other one is the current time of the video.
So you can key events
according to how the video is playing
and what the current time in the video is.
You can also get how many bytes have loaded,
how many bytes are total.
And then the start bytes, which is, you know,
in the case where you start it from the middle,
you can know what the start bytes are.
So if you wanted to, you could recreate
the seek bar here using that data.
So you could have your own custom seek bar or whatever
if you wanted to, and that really comes into play
when you're using the chromeless player for the most part.
There's also ways to get and set the volume,
um, and mute it.
Uh, and I think that's it.
We'll go through that stuff in a little bit.
So...
this is our JavaScript API reference.
All the functions are listed out here.
You have play, stop, pause.
I'm not gonna go through all of them
'cause they're probably pretty self-apparent I think.
Um...
Seek to--
One thing to note when you're seeking with videos
is that the FLV format has a limitation
to where you can seek to in that you can only seek
to a key frame within the video.
And if you're familiar with video,
you know that there's not a key frame every second,
or every frame even.
The key frames are usually spread out.
And in my experience, key frames on YouTube
are usually between two seconds all the way up--
I've seen them as far apart as 15 seconds unfortunately.
So we have been working a little bit
on getting that closer together
and trying to set up a standard way of saying
any video should only have key frames
at a maximum as far apart as two seconds,
which makes seeking a little bit better.
But in some cases, with older videos that haven't,
you know, that were encoded a long time ago,
you might see a little bit worse performance in that case.
So that's something to worry about.
If you call seek to
and say you want to go to seconds--
like, 15 seconds into the video,
and the first key frame before that happens to be
at, like, seven seconds,
they player will always jump to the key frame
before the time that you requested.
So the user will always see
the content that you intended them to see.
But they might see a little bit ahead of that time as well.
And you guys could do some trickery where, you know,
you seek to 15, and if it doesn't go to 15,
you could, like, hide the player
and mute it or something until it gets to 15
and then show it.
So, I mean, you guys could sort of hack together
a real sort of accurate seek time thing.
The allow seek ahead parameter
is just the way to allow you to either
tell the player-- allow the player to jump ahead
and make a new request to the server
or only seek within the part that's already downloaded.
So you can actually genuinely build, like,
a seek bar that works the same way that ours does.
Um...
Everything else here is pretty standard.
Um, the add event listener is the way that you listen
to state changes in the player.
So when the player loads, you can--
you can set up a listener for this on state change event.
So any time the player state changes,
like, if the user plays it or pauses it
or the video ends, you can listen for that state
and then act upon it.
So you can know when the video ends
or if the user paused it.
You could also compare the current time
to the duration of the video as well
and find it out that way.
But the events are probably a little cleaner.
And then there's an error event,
which this only has one error listed,
but there's actually two different errors you can get.
One would be if the video has been taken down,
or if it's now private, or something like that.
And the other one is if the video is, uh,
has embedding disabled,
which I believe is a 101 error.
But I haven't updated the documentation yet.
The way that this works
is when you load the player in the page,
you have to add a player parameter
in order to enable the JavaScript API,
called enable JSAPI.
You set it to one.
And what this does is it tells the player
that you want the JavaScript API to be turned on.
And so by default it's turned off
so we don't call random JavaScript functions
on everybody's pages.
Once you call that,
when the player loads on the page,
it's going to call this function called
"on YouTube player ready"
which is mentioned right here.
Right here.
So what you do is you specify this function
called "on YouTube player ready" in JavaScript on your page.
Once the player loads, it calls on YouTube player ready,
and that's how you know the player is ready.
Um, there is a certain case
where if you have more than one player on your page,
you might not know which one is ready.
So there's another variable called player--
"player API ID," which is right here.
And you basically just set that to any string that you want.
It should be, like, a unique string, obviously.
And what happens is when the player then calls
on YouTube player ready,
it'll pass that string back to that function.
So you know which of your players is ready
and which ones are still initializing.
Yeah?
[man speaking indistinctly]
Stearns: Um, so the--
Yeah, so the question is
is there a way to stay in full screen
and jump from video to video?
In the normal embedded player, no, there's not.
There's no way to load a new video at this point.
It is something that I want to add,
but I don't know how long it'll be until that's added.
With the chromeless player, you could do that.
So in the chromeless player, it doesn't have
native full screen functionality that we do.
But if you load the chromeless player
into your own SWF and make that go full screen,
then you could load a new video into the chromeless player,
and it would stay in full screen,
and you could load the new video.
So you guys could do, like, a full immersive
full screen mode where they never have to leave
and load whatever videos you want.
Um, let's see.
So that's pretty much it.
There's a lot of other example code on this page
to get you started.
And the demo that I showed is down here at the bottom
where the sample stuff is at.
So let me show you a couple other demos
using the embedded player.
So here's something that I put together
after I made the API.
This was sort of inspired by a mashup I saw a while back
on the Internet called--
It was using a video called "Rendezvous,"
and it a guy--it's an old classic video apparently
of a guy who races through Paris
going really, really fast in a car.
And somebody had taken a Google Maps thing
and had planned out his route
and synchronized it with the video.
Only it was, like, fake synchronization
where you had to, like, start the video
and then start the map at the same time
and hope that they were synched up.
So I did this video as sort of--
kind of a parody of that,
but then also sort of a showcase
of what you can do with the embedded player API.
So what this does is it takes this race
that goes down a really twisty street here
in San Francisco, and it sort of synchronizes
the guys' travel down the street on this Google Map.
[crowd cheering]
So unlike the other mashup that I had seen,
this one actually synchronizes it with the player.
Since we're using the player API,
we already know where the player position is
when you're playing stuff back.
So if I back up here, you'll see the map
will stay synchronized with it and back up with it.
So I can actually drag this and, like, jump ahead,
and the map will always stay synchronized
exactly with where the guy is in the video.
So this isn't real GPS data. I wish it were.
That would make it really cool.
I actually set up--
There's sort of like a debug mode on the map's code
that I borrowed from the other guy
where you can just kinda click on the map in an area
and it'll follow where you're clicking.
So you can, you know, plan out the area you want to go to.
And then I just sort of manually tweaked it a little bit.
man: Whoo.
Stearns: And if you view the source of this page,
all the source is there, you guys can look at it.
Uh, the URL's right here if you can see that.
It's linked on my presentation.
So if you grab my presentation,
you can see it.
Okay, let's go back to this here.
All right, so here's another thing.
This was actually started as, I think, a 20% project
of a Google engineer down in Mountain View.
They wanted to have a debate tool,
I guess you could call it,
where they wanted to watch these presidential debates,
and then add a sort of transcript,
and then also have a sort of interactive feature to it
where, you know, if a politician said something
in their debate, you could look it up
and then, you know, add the transcript later
saying, you know, "This isn't necessarily accurate."
You know, "There might be some other stuff here."
Or, you know, "This is accurate.
And in addition, here's some more information."
So there's a few different videos here.
And you can actually pick one.
And you have this transcript for the video
that goes along next to it.
And you can jump around by either clicking here,
and you can jump around the video.
Or if you just watch the video,
this transcript will stay synchronized the whole time
while you're watching it.
It's a pretty nice use of it I think.
man: And especially Mexico.
Southern Mexico, it was a disaster.
It destroyed the entire agricultural economy.
Guess what happened, they all came north.
If NAFTA had worked so well as--
Stearns: Oh, my God.
Um, let's see.
And then this is sort of the same idea.
This was, uh--
Michael Geary actually came up to us at Google I/O
a few weeks back and saw the demos.
And I think he went home that night
and coded this into a jQuery plugin the next day,
and showed up at our booth and said,
"Hey, look what I made. It's pretty cool."
So this is really neat.
This is sort of like a presentation tool
where he took a video--
I believe he gave a talk at Google a while back
about YouTube map mashups
where he did some election maps
using YouTube Maps and the maps API.
woman: All right, so this is Mike Geary.
So I originally--
Stearns: So he made this little tool.
And this is actually a jQuery plugin
that you can take
and add a bunch of pointers to your video.
And this is, you can see, it's, like, an hour-long video
of the presentation.
And as it goes through, this will follow along.
You can see it just changed there on its own.
And then in this big area here,
it actually loads in a URL that you give it,
or it could load, you know, it could load a slide
of your presentation if you wanted it to.
Or in his case, he actually loads
different HTML pages and the actual Maps demos
that he's talking about in the apps.
Like, if you look at Iowa maps API map,
you can see this actually loads
the thing that he's talking about in the thing here.
And this is actually a live Google Maps thing.
So you can move it around and play with it and zoom in
and actually play with it while the talk is going on
while you're listening to the talk.
So I thought this was a really nice use
of the player API.
And it always stays synchronized
as the video plays.
And the source code is all there.
I think it's anno two, but I guess he called it--
And like I said, it's a jQuery plugin.
So if you're using jQuery already,
it's really easy to get started and using it.
You just basically set your stuff up and go.
Um...
All right.
So...
Um, the Flash API, does anybody use Flash?
Anybody care about Flash?
Should I go over the Flash stuff?
All right, there's a good number of people.
So I'll talk about it a little bit.
There's not really a lot to talk about.
Everything that's in the JavaScript API
that I mentioned is also available in the Flash API.
So it's pretty much the same thing.
The one caveat is that our players
are written in ActionScript 2.
I'm sorry.
But we do that so we reach more people.
So I know all you guys are probably using
crazy ActionScript three.
You can still embed the player in ActionScript three,
but it takes a little bit of extra work.
So you're probably familiar if you're a Flash developer
that AS 2 cannot talk directly to an AS 3 SWF.
So you have to write some sort of wrapper
that uses either external interface
or a local connection to talk between the SWFs.
I've seen a few people do it.
I think this presentation--
or one of these demos I'm gonna show does it.
So it is possible.
And there's a lot of talk about it
on our GData API forum
if you guys are interested in checking it out
and you want to get on there.
Um...
The only difference really with the Flash API
is how you load the player.
So you actually load it into a movie clip,
and then you can call this
"is player loaded" call.
You basically have to set up some sort of loop or something
that checks until it's loaded.
And then when it's loaded, it'll let you know,
and you can start calling all the API calls.
Um, okay.
So the chromeless player.
The chromeless player, I can actually claim
that I designed the chromeless player.
The visual design, that is.
And that's because it doesn't have a visual design.
All it has is a logo.
So to show you an example of the chromeless player
I suppose...
[clears throat]
Here it is. Ta-da!
Hold the applause, please. No applause.
[laughter]
All right, so the idea behind the chromeless player
was that we wanted to give people
as much control over our player as we could,
within reason obviously.
So we still want to add all of our cool features,
like, you know, annotations and things and--
Excuse me.
And all the fun stuff.
And also hopefully make it easier
for you guys to develop with our things,
with our videos, I should say.
So the chromeless player has all the same controls,
JavaScript controls, Flash controls,
as the embedded player does,
only it doesn't have all the extra stuff,
like, you know, the related videos
and the color settings and the control bar and things.
All right.
So, um, that's pretty much it.
I want to show you guys some demos
'cause I already have this one up.
This one was a pretty recent thing.
This was done by a little agency
in, I don't know, I think Philadelphia or something.
And this is for JCPenney.
And they did, like, a little karaoke machine.
And you can actually start singing.
And what it does is it--
They basically capture their own video,
and it's a Flash app obviously.
It's, like, a full page thing.
I think it's actually AS 3.
And let's do "Ballroom Blitz" I guess.
And it records you--
I guess it'll record me.
I don't know, I'll have to like--
I'll have to scoot down here.
Oh, no.
Well, it didn't find my webcam properly.
Whoops.
We don't want to watch that one again.
man: Watch the balloon again.
Stearns: Yeah.
I'm gonna bring a balloon to this thing next time.
Let me open that up again.
All right, I'll just show you guys one
that somebody has made.
So what they do is they basically record the camera
in their app.
They send it up to--
They can sort of transpose and sort of--
I don't know, I guess "transpose" isn't the word.
They can sort of mash up all these sort of different,
uh, effects and things that they've done
that are similar to, like, what you can do in iChat
if you have the most recent version of iChat.
And then they send it to YouTube.
And then they play it back using the chromeless player.
So this is the chromeless player loaded into their app,
and then they have their own custom UI.
You know, it's real simple, just play/pause.
And then you can listen to all these people singing.
So it's like a karaoke app.
man singing softly: And I ran.
I ran so far away.
Stearns: Yeah, not everybody really gets into it as much.
man singing: I couldn't get away.
Stearns: We could find a good one I guess.
Let's find somebody good.
This guy looks like a pro.
[laughter]
Yeah.
man singing: I'm all out of love.
I'm so lost without you.
I knew you were right
believing for so long.
in falsetto: I'm all out of love.
I'm so lost without you.
I knew you were right.
Rachel, come back.
Ahh-ah-ah!
Get this thing out of my face.
Stearns: Yeah, so--
[laughter]
So the way that this works, I believe,
is they capture frames of the video, or the video,
and then add their effects on the client's side using Flash.
And all these effects that you see,
like the stars flying around things,
I think are actually done in Flash
using, you know, just random things.
And then you can do, like, different stuff.
And you can actually manipulate bitmap stuff
really well in Flash, so.
And then they take that and they send--
they compile the video on their server,
and then suit it up to YouTube using the API
and then load it back through the API
into their app there and display it all.
So it's a really nice use.
I have a few other demos of the chromeless player
that I want to show you guys too.
If you're not up to writing your own player that uses it,
there's a really popular player called JW FLV player
that some of you may have heard of.
It's pretty popular.
If you don't recognize these controls,
you probably will see it around the Internet at some point.
It's a really popular just sort of really generic
FLV player that plays pretty much anything.
And it's really, really customizable.
So when I did the chromeless player,
I told this guy about it.
And he was interested to get the chromeless player
into his player.
So you can actually use this player now
to play YouTube videos because it uses the chromeless player.
[David Hasselhoff's "Jump in My Car" plays]
So he chose also a really awesome video to demo this.
Hasselhoff singing: Jump in my car.
I want to take you home.
Come on and jump in my car.
It's too far to walk on your own.
women singing: No, thank you, sir.
Hasselhoff singing: Oh, come on.
Stearns: And you can see here
it's really customizable.
And you can go through here and customize
pretty much anything.
You can auto start.
He actually has a full screen option here too.
[man speaking indistinctly]
Stearns: No.
man: Too much of it.
Stearns: What, you don't like this?
You don't like The Hoff?
[song begins again]
Uh, and I'm not really sure why,
but the YouTube logo gets really big on this one
when it goes full screen.
But you can actually call set size on the player,
and set it to the size,
and the logo should stay the small size.
So he must be doing something funky with that.
But you should be able to get that fixed there.
So that's sort of an example of the chromeless player.
So going full screen.
So, like, you can see this.
And if you were to customize this player
to allow, you know, to load new videos,
then you could have a full screen player
that just always stays full screen,
and just always loads new videos as they sit there.
Hasselhoff singing: How can you say that?
We've only just met.
Stearns: Yeah.
It's a good video.
You guys should watch that at some point.
man: Is it possible to detect
the exit of the full screen?
Stearns: So is it possible
to detect the exit of the full screen?
Yes, if you're using Flash, you can.
Whatever the container movie clip is,
there's an on full screen event that gets fired,
and it tells you if it's going into full screen
or exiting full screen.
man: What about in files using JavaScript?
Stearns: No.
Our player doesn't have that built in either.
[man speaking indistinctly]
Stearns: Right, I mean, it could be as simple
as making a SWF that proxy's the JavaScript calls
to the JavaScript into our player
and that also has
the on full screen event handler and, like, that's it.
So it would be a pretty simple SWF
if that's all you wanted.
man: Would the events that are defined by RealPlayer
be allocated out--
Stearns: You'd have to do it yourself.
man: So we'd pretty much have to recreate everything--
Stearns: Yeah, but that API's not that big.
So it wouldn't be that difficult.
There's another question back there.
man: Yeah, what's the advantage of using the chromeless player
[continues indistinctly]
Stearns: Um, well, the difference is that
we don't allow people to access our FLVs directly.
You have to jump through a lot of hoops to do it.
And it's not supported by us, and we really discourage it.
The reason being is that we have--
We give a lot of users options when they upload their videos.
Like, they'll only want this to be available
in this country,
or maybe they only want their friends to be able to see it.
And if you go to the FLVs directly,
you bypass all of that.
So our players are, like, the gateway.
So our players are sort of, you know,
playing the cop to our FLV things
to enforce people's options.
So you could in fact piss off your users
if they went to your site and you started playing
their private videos, and they'd be like,
"What's wrong with you guys?"
So it's better to use the chromeless player
or the embedded player.
And then we won't send you nasty illegal letters either.
[laughter]
Small--small footnote there.
Um, any other questions before we keep going?
All right, I'll leave some time at the end for questions.
Actually, how much longer do I have?
15 minutes.
I think so. All right.
A few more examples.
This is a company called Slide.
They do a lot of Facebook apps and things.
They have a way that you can customize the chromeless player
and then put it on your site I think.
So they have, like, a bunch of skins you can choose.
I like this one 'cause it's got lots of bling.
Then you can, like, pick a video you want.
And it basically looks like this,
so you can have, like, a custom player,
and it plays in their player.
Whoops, this actually makes you save it
before you can play it.
No, skip.
So here's my video, and then I can hit play.
[man singing, crowd cheering]
Stearns: So that's about it for that one.
Um, let's see.
Here's another example of someone
who had made a custom UI
using all Flash.
So this is actually a SWF that loads the chromeless player.
Again, sort of like the JW FLV player.
And they have their own thing.
So what they have is they have it set up
so you can actually pick a YouTube user channel,
or user favorites, or playlist, or whatever,
and then put in, you know, either the user name
or maybe, like, a keyword, I think, or something like that.
And it'll actually make you a player
that you can embed on your site.
And then that player will play, like,
all your favorite videos,
or a specific user's videos if you want.
So it's kinda cool.
So these are, like, playing videos
from Big Cat Rescue.
One time I was showing this at a talk,
and there was a video of a tiger
carrying around a severed cow head.
And it was really gross.
[laughter]
I just thought I would share that with you guys.
woman: Like any youngster, Hope just had to show off--
Stearns: That didn't look like a big cat.
That looked like a house cat.
All right, anyway, one more quick thing.
This one was done by a guy I used to work with
that I thought was kinda neat.
There's a whole sort of--
Whoops, why is that there?
So there's this whole sort of,
uh, sort of subculture on YouTube, I guess,
that videotape records and 45s and things.
They put a camera and point it at their 45 and play it.
So they have, like, all this really cool, old,
like, reggae, and ska music, and stuff.
[cat meows]
And apparently cats meowing.
I guess that's on the record.
So he set this up so it's sort of like a little,
like, a jukebox thing where it'll play one thing.
And then when this is done, it'll start playing
the other one automatically and then load a new video.
And there's a few different users where, like,
all their videos are just this stuff.
So you can just pick the username and then play it.
I thought this was kinda neat.
And it uses, you know, the volume.
And if you don't like a song,
you can just start playing this one.
And then when this one starts playing,
the other ones stops and--
I don't know, it's kinda neat.
Really simple, but interesting, I thought.
Um, all right, so that's it.
So I was gonna do a demo here really quick
of the JavaScript stuff, but I think I went over it all.
So why don't we just jump right to questions.
And then if you guys have questions
about the JavaScript stuff, I can answer them
and sort of do the demo that way.
Question over here, yeah?
man: Sorry, I have a JavaScript question.
Stearns: Oh, no problem.
man: I've seen some examples
of people putting their own logos on the videos,
which I imagine is somewhat of a sensitive topic.
What's the Google policy on that?
Stearns: Um, so disclaimer.
I'm not a lawyer, obviously.
But, uh, if you're using the chromeless player,
it's gonna have our logo on it.
Or the embedded player's gonna have our logo on it.
So usually if you see somebody that's using that
with their own logo, they're probably not using
one of our players.
So it's, like, totally unsupported
by our terms of service,
and it's a violation of our terms of service, I believe.
You know, unless they have some special arrangement.
But to my knowledge, I don't think we even do
special arrangements like that.
So it's probably way bad.
Don't do it.
Any other questions?
In the very far back there, yeah?
[man speaking indistinctly]
Stearns: So the question is what kind of control do you have
over the bit rate the videos are encoded at?
And the answer is absolutely none.
YouTube encodes them at our own bit rate,
so whatever we want when the user uploads it.
If you look at the YouTube site lately,
you'll notice that we do have on some videos
a high quality mode.
So you can actually watch them at a higher quality.
So I think the default size is somewhere around
320x240 for, like, the small, classic sort of YouTube sizes.
And then we have bigger sizes from there.
And then you'll see different sort of bigger quality stuff
on, like, iPhones and Apple TVs and things.
But we don't, I believe, don't give access to those
in the API stuff.
So at some point down the road,
we will be adding high quality to the embedded players,
but it's a matter of seeing the feature
mature and stabilize on the site first
before that happens.
The thing is that when we add new features on the site,
we have to let them sort of settle in.
'Cause if we add them to the embedded player
and add them to the API,
then you guys get really mad if we ever change them, right?
So we want them to be solid
before we push them out to you guys
and you guys start using them.
Any other questions?
Yeah, green shirt I think had his hand up first.
man: So what's the policy on displaying
in-video advertisements embedded in--
Stearns: So the question is
what's the policy on embedded-- putting in-video advertising
on the players?
And I believe it's totally forbidden.
man: So--
Stearns: You mean our policy or can you do it?
man: No, your policy.
Stearns: Our policy.
I think we may at some point.
So I guess--I suppose we reserve the right.
I think it's in the terms.
Nickeal could probably answer that question
if you guys want to ask him specific stuff.
And his talk's actually next.
And he'll be able to sort of explain the terms of service
and give you some better-- Maybe?
No?
Nickeal's not a lawyer, but he can--
But he knows it really well.
So feel free to ask him, unless there's somebody better.
Is there anybody better that's here?
No. Nikeal's your man.
Nikeal's your man. Go ask him.
Next question.
Uh, I don't know which one was you first?
All right, go ahead.
man: Um, with a lot of your examples
you showed exactly what I was looking for
which was the time-based events.
If the key frame is not there, is it still accurate such that--
I don't care if there's a key frame or not.
But I do care that if when I'm listening to it
that it tells the right time.
Stearns: Uh, it does.
So if you seek to 15 and it goes to 10,
it'll tell you that it's at 10.
man: But if I'm listening to see where it's at,
will I be told it's at ten because there's no key frame?
Stearns: Um, you will--
Well, you're basically told
exactly where it's at.
So, like, whatever you're seeing on the video
and whatever time that is, that's what time the API says.
So if you tell it to go to 15,
and there's no key frame at 15,
but there is a key frame at 12,
the player goes to 12 and the API tells you
that it went to 12.
man: And thus going forward I'll know it's at 13, 14, 15?
Stearns: Right, right, right.
And then it goes up from there as it goes.
Uh, yeah?
man: So I'm having problems
resizing the YouTube player in Flash.
Stearns: Okay.
man: And I'm not sure exactly
when you're supposed to do it.
[continues indistinctly]
Stearns: So I think there was a bug about this
that I was tracking.
Are you the one that posted that on the forum actually?
Somebody posted it.
The thing is is that if you set up--
There was a bug in the player where if you set an interval
to pull the player too often, it was basically saying
it was ready before it was actually ready.
man: Your example was every two--
Stearns: Right, I think in Flash
my example code was using an on enter frame event,
and I think I was using, like, 31 frames per second or so.
And that was okay for me, and I never saw the bug.
But I was able to reproduce it,
and I think I just fixed it yesterday.
So you'll probably see it in a push next week probably.
So it should be fixed next week.
And then you should be able-- as soon as you call--
As soon as the player's ready you can call set size,
and it'll work.
Uh, another question over here maybe?
man: Question, with the chromeless player,
the whole video frame becomes effectively a button.
You can click there and it'll launch YouTube
to that video's homepage.
>> Stearns: Right.
man: My question, is there a way to disable that or change that?
Stearns: No, and I think it's part
of the terms of service is that you have to have
a link back to YouTube.
So I think that's why that's there.
man: All right, so I think
the following question will probably be "no" as well.
But in the sharing menus,
the event code could be link.
There's no way to control the Google to that URL is there?
It's always back to YouTube.
Stearns: Yeah, it always goes back to YouTube.
If you use the chromeless player though,
it doesn't even have that.
So you could in theory build your own link.
Like, in fact that Rock Your Look site,
they actually when you get a link to a video,
it gives you the link to the Rock Your Look site
to the specific video you were watching,
not to YouTube.
Uh, another question?
[man speaking indistinctly]
Stearns: Yeah, okay.
As long as you're, you know, nice to us, it's cool.
There was another question back there I think, yeah?
man: Yeah, are there any plans
for an ActionScript 3 player--
Stearns: Um, yes, but it's probably still some time away.
man: What's that next version of ActionScript?
[continues indistinctly]
Stearns: Yeah, ActionScript 3 is, like, the latest version.
It's a different-- it's not compatible with AS 2,
which is what our players are written in.
So you have to have a new version.
Any more questions?
Do you guys wanna watch more Billoon videos?
[laughter]
There's a question in the back there.
man: Question on the frame size.
When we upload a video that is set in wide-screen,
can we, in the chromeless, show that in its true size?
Stearns: Um, you can.
Um.
It's a recent thing where YouTube
used to force all videos to be 4x3.
And I believe there's been a recent change
to where we don't do that anymore,
but I don't know if it's every video
or only, like, certain popular videos.
I'm not exactly sure.
We are moving in that direction though.
So very soon, if not already,
you will be able to upload, like,
a 16x9 video and it'll stay at whatever aspect ratio
you upload it at.
So the players, including the embedded player
and the chromeless player, are set up in a way
that you basically set the viewport size,
and then the video, no matter what the aspect ratio
of the video is, it just tries to fill up
as much of the space that you give it as possible.
So if, like, the video is--
If you set the chromeless player
to be 16x9 and the video is 4x3,
you'll just automatically get black bars
on the left and right side.
Same thing if it's, like, you know,
a really tall and skinny video.
You'll get black bars on the, you know, the side.
I should say bars on the top and bottom, I guess.
Or, yeah. You guys know what I mean.
Another question.
man: The videos that were uploaded, say,
six months ago have the resolution of DVD encoding?
Stearns: Um, they may be, but I don't know.
We have a lot of videos, so it could take a while.
Um, but it's something that I would like to do.
So it could take a while, but, yes.
Another one in the back?
[man speaking indistinctly]
Stearns: Uh, that's a good question, and I don't know.
Um...
Oh, so the question was that--
Do all of the videos get encoded at the same bit rate,
or do we sort of sense the quality of the video
and then encode it at a lower bit rate?
Um, I think that for the high-quality stuff
we sort of check and see if the video
would actually benefit from being high-quality.
Like, if somebody uploads a crappy source version,
we might not waste time making a high-quality version of it,
'cause it wouldn't really help.
But I think, like, the standard, you know,
320x240 size, I'm not actually sure
if it's a standard bit rate for all of them.
It might be a good question to ask--
Actually, I don't know who would know that.
Probably some of the engineers. Which one?
You think John? Yeah, John would know.
If you see John Harding out front,
the guy that did the talk first, he may know that.
Um, any other questions?
Last chance.
Okay, I will be around, in the lobby probably,
for the rest of the time.
I think we have a break right now for about 15--
19 minutes or something, 'cause we're stopping
a little bit early, so feel free to wander out.
Go to the bathroom. Get a snack.
Uh, thanks for coming.
[applause]