Hi, my name is Stephanie Liu, and I work on the YouTube APIs
and Tools team.
Today, I'll be going over some simple examples using the new
player APIs and the Chromeless player. First, a little bit
of background. Before, if you wanted to embed a YouTube
video onto your site all you could do is choose one of our
standard embedder players, and put it there. As a developer,
you really didn't have any insight about what was going
Flash APIs that we've just released, will allow you to
control our embedded players. Issue commands like play,
pause, seek to a specific position in a video, mute, set
volume; get data, like current time, and how far the video is
buffered. You can also subscribe to events like
changes in the player state. Now, the Chromeless player is a
swf with no player controls. So, no YouTube buttons or our
progress bar. You can put in your own buttons and customize
it to fit in with the look and feel of your site. OK, so, let's get
started with what the JavaScript player API can do.
So, here we have the regular YouTube embedded player. I
think everyone's probably pretty familiar with this.
It plays and now I'm gonna show you how to set up this
embed so that we can make API calls to it. The first thing
you need to do is include "swfobject.js". Now, I
recommend using a swfobject because it makes embedding
Flash content a lot easier. It'll take care of things for
you like detecting the user's version of Flash. They're
going to need version 8 or above to be able to see your
player correctly. Now here, is the div that the embed is
gonna to live in. You'll notice we're calling it "ytapiplayer,"
we're going to need that later. And, if they don't have
8 or above installed, they'll just see this line of text
instead of a broken player. Now we're kinda getting into
the meat of it. Here is where we're actually going to set up
the embed object.
You see here, the parameters that we're
gonna have in the embed object. We need
"allowScriptAccess: "always"". This means the YouTube swf can
make calls to your HTML page. And your HTML page can make
calls to the player swf. One of the attributes we wanna set
is id for "myytplayer". This is gonna be the name of the
embedded object. You can use this to get a reference to the
player via JavaScript using get element by id later on.
Now "swfobject.embedSWF" will actually load the player from
YouTube and embed it on your HTML page. Let me just go over
all the parameters that you need here. The first parameter
is the URL of the swf. "enableksopi=1," just
enables the player to receive API calls.
Now "playerapiid" is the parameter that's going to be
passed to "onYouTubePlayerReady" as the first argument
when the player is loaded and ready to go. Now you want to
name the player because if you are expecting multiple videos
to be loaded on your page, you'll want to know which one
has just told you that it's ready. The second parameter
here is the id of the HTML div that the embed is going to
live in. As you'll notice, this is "ytopiplayer," that we
called up here. Then we got width, height, and the
required version of Flash that the user needs. So remember
that they need "8" or above to be able to see your content
correctly. And then a couple of optional parameters we're
not going to use. And the parameters and attributes we
set up here. Okay, now that the embed is set up to receive
API calls, let's do something a little bit more interesting.
Let's enter some commands.
So here I've added a couple of links
We can control the player using these instead of the
buttons. I'll play and pause it. Stop. Mute. Unmute. And
so let me show you the really simple calls that need to be
made to set this up. As I was saying before, once the player
is loaded and ready to go, its going to call
"onYouTubePlayerReady."
So here we're defining the function. And we're just going
to grab the reference to the player and store it, so that we
can issue API calls to it. With that, we're ready to actually
start making things happen.
So this is how we set up those links. This is really simple,
just a link with an "onclick" to this play function. And
error checking, making sure it's not null, and then
calling "ytplayer.playVideo." It's that simple. Similarly,
with pause we got ".pauseVideo," "stop,"
"stopVideo," and then "mute" and "unmute." It's as simple
as that to issue these commands to the player. Now
that we've issued some basic commands, let's try to take
some input and seek to 90 seconds into this video.
And this is just as easy as the other commands, and I'll
show you how to do that.
So here's a little form we made to get user input on how
many seconds to seek to in the video. We're calling the
"seekTo" function here and we're just grabbing the value
in the text box. And here's how we're defining the
function, very similar to what we did in before
"ytplayer.seekTo." The seconds we just passed in and
whether or not we want to make a new request to the server if
the "seekTo" position is beyond the loaded video. So
now that we've issued commands to the player, let's try to get
some data from it. Useful data to have is what the current
time of the player is, how far the user is in the video. So
if we hit play here, you'll see that the current time div
here is updating.
So to constantly display the current time of the video, we
are going to go back to
"onYouTubePlayerReady." We're going to add an interval for
every 250 milliseconds. So every 250 milliseconds is
going to be called "updateCurrentTime," which
just calls "ytplayer.getCurrentTime" and
updates the HTML. You can also get other data like the
duration of the video, the URL of the video, and the embed
code. So now that we've issued commands to the player,
gotten data from it. Let's see how we can subscribe to events.
In this case, let's have the player tell us every time it
changes it's state. So right here you can see that the
player is in state 5, which is video queued. If I hit play,
it goes into buffering and then to 1, which is playing.
I pause it, it goes into 2 and so on. So let me show you
how to subscribe to an event. Now if we want to constantly
show the current player state, we're going to go back to
"onYouTubePlayerReady" and we're going to add an event
listener by saying "ytplayer.addEventListener."
We're going to subscribe to the "onStateChange" event.
And the "onStateChange" event is going to use our callback
function right here and pass it the current state.
And here we are just updating the HTML. Now you know the
basics of the JavaScript API. How to issue commands, how to
get data, and how to listen for events. The Flash APIs
have all the same calls and the same functionality, but
loading the YouTube players swf into another swf is a
little trickier. Because of the architecture of the
player's swf, using the action script's built-in
"MovieClipLoader" will not give you accurate information
about when the player is ready.
So, here's a snippet of code that loads the YouTube player
into Flash. We create a new "MovieClipLoader" here.
Then we load a YouTube swf into it and call it "ytPlayer."
This listener will check every 250 milliseconds whether the
player is loaded or not. Now this is the extra call that is
not in the JavaScript API. "ytplayer.isPlayerLoaded" is
what you should use in action script to check if a player is
loaded or not. Once this is true, we can go ahead and do
all the things I talked about before with the JavaScript API,
like addEventListeners.
Now that you know all about our Player APIs, let's talk
about the Chromeless Player.
As I was saying before, the Chromeless Player is just a
swf with no buttons. You can customize it to look however
you want. So for example, on this site they're using the
Chromeless Player. Using their
own buttons, and then using the player APIs to control it.
So here's an example, very similar to what we had before
except that we're using the Chromeless Player. You'll
notice that the buttons are gone and the progress bar.
All that's left is the YouTube logo here in the bottom right
hand corner. It uses the same JavaScript APIs that we've
been talking about, so I can control it with this links.
Play. Pause And you already pretty much know how to set this
up, except that the swf URL is different. So let me show you
that right now. So one thing that's different about the
Chromeless Player from the regular embedded player is
that you need a developer key to access it. So if you don't
have a developer key, head over to code.google.com and
get one. It's free and really easy to sign up. Now this code
should look really familiar to you. The only difference
between embedding the Chromeless Player in a page
and embedding a regular YouTube embedded player,
is the swf URL. So you can see here the URL for the
Chromeless Player swf is gdata.youtube.com/apiplayer.
Here's where you put your developer key.
And then the other two parameters are the same.
So now that you know how to load up the Chromeless Player,
let me point out a few differences from the regular
JavaScript API. You'll see here this is actual what the
Chromeless swf looks like when you first load it when you
first load it cause it doesn't have a video id in it yet.
So there's a load video id function that we can call.
And there it goes. There's also a queue video function
that you can call. So this just loads the thumbnail and
grab the video, but doesn't start playing. To load a new
video into the Chromeless Player, we just call a
"ytplaer.loadVideoById," pass it in "id," and optionally
where in the player we want it to start at. Similarly, for
"cueNewVideo," we call "ytplaer.cueVideoBGyId," pass
the "id," and where in the video we want it to start once
the player has issues a play command. Hopefully, this give
you a good idea about what these new tools are and what
you can do with them. There are a lot of things I didn't
cover here, so be sure to check out the documentation
on code.google.com