1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
While other sites may offer higher quality video, if you want traffic YouTube is the place to be. But thanks to a recent overhaul to the YouTube API, you can do more than just embed your videos on your own site. In fact you could build your own uploading system and simultaneously post videos to YouTube and your site.
The YouTube API is has a number of different functions -- there's the Data API for grabbing info about movies, the Player API for skinning your embedded players and more. We;re going to take a look at both the Data API and Player API.
We'll start with the Player API since it's a little bit simpler to interact with.
YouTube recently unveiled a new improved [http://code.google.com/apis/youtube/getting_started.html#player_apis Player API] that allows developers to do things like re-skin the video player or create your own custom controls. Many of the new functions can be accessed through both JavaScript and ActionScript. We'll take a look at the JavaScript controls, but the ActionScript API is very similar so you can convert this code without too much trouble.
== Getting Started ==
When it come to embedding Flash, YouTube recommends using SWFObject, which is a JavaScript library for embedding Flash movies. Grab a copy of [http://code.google.com/p/swfobject/ SWFObject] and put it in your public web folder. Now include this line at the top of your page:
<code>
<script type="text/javascript" src="/path/to/swfobject.js"></script>
</code>
Now let's embed a movie and start playing with the new API.
== Using SWFObject ==
If you've never encountered SWFObject you're in for a treat. SWFObject greatly simplifies the process of embedding Flash movies, taking care of various cross-browser issues and other problems.
All you need to do is define a tag for SWFObject to replace with a Flash movie. Here's some example HTML code you can use for this tutorial:
<pre>
<body>
<div id="ytplayer">
<p>You will need Flash 8 or better to view this content.</p>
</div>
<script type="text/javascript">
var params = { allowScriptAccess: "always" };
swfobject.embedSWF(
"http://www.youtube.com/v/tFI7JAybF6E&enablejsapi=1&playerapiid=ytplayer", "ytplayer", "425", "365", "8", null, null, params);
</script>
</body>
</pre>
Okay, here's how it works: first of all we create a <code>div</code> container to hold our embedded movie. If the user doesn't have Flash 8 or better they'll see our plain paragraph text (note that SWFObject offers far more sophisticated ways of handling this, like auto-updating the users Flash player, see the docs for full details).
The next step is to write the JavaScript and embed the movie. We've defined a params argument to tell Flash that it's okay to let the YouTube domain load scripts and then we call the <code>embedSWF</code> function.
The parameters passed to <code>embedSWF</code> include the location of the .swf file, the id of the tag we want to replace, width, height, player version to require (the YouTube API requires 8 or above) two params we're not using and finally our params value.
Now let's take a look at that URL was passed to <code>embedSWF</code>. For the most part it's an ordinary YouTube URL, but we've added to additional bits of data, we've told YouTube that we want to use the JavaScript API and we've given our player an API name.
The API name, in this case "ytplayer" is important because if you ever embed two movies one the same page and want to control them separately each one needs to have a unique name.
== Controlling the Player with JavaScript ==
If you load the above code in a browser you'll notice that you just rickrolled yourself. But more importantly, you'll notice that the movie file doesn't look any different than a normal embedded movie.
Let's start adding some outside controls to our page so you can see how the Player API works. Go ahead and paste this function into your HTML, just below the SWFObject function:
<pre>
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}
</pre>
Now just below the div element that we're replacing, add this HTML code:
<pre>
<a href="javascript:void(0);" onclick="play();">Play</a>
<a href="javascript:void(0);" onclick="pause();">Pause</a>
<a href="javascript:void(0);" onclick="stop();">Stop</a>
</pre>
If you reload the page you'll see that our HTML links can now control the player.
Now you might be thinking, what's the point? After all the player already has controls. but if you're trying to make embedded movies more closely match the look and feel of your site's design, these tools make it easy to create your own controls.
So how to get rid of YouTube 's controls? Well, to do that we'll need to use the "chromeless" player. To embed the chromeless player you'll need to sign up for an API, which you can do at [http://code.google.com/apis/youtube/dashboard/ YouTube API Dashboard].
To use the chromeless player, our url parameter inside the <code>embedSWF</code> function becomes something like:
<pre>
http://gdata.youtube.com/apiplayer?dev_key=YOUR_DEV_KEY&enablejsapi=1&playerapiid=ytplayer
</pre>
notice that we haven't passed an actual movie id in this case. To do that with the chromeless player we use the <code>loadNewVideo</code> function. So add this code below our other JavaScript functions:
<pre>
function loadNewVideo(id, startSeconds) {
if (ytplayer) {
ytplayer.loadVideoById(id, startSeconds);
}
}
</pre>
There are a number of ways we can call this function -- through a drop down list of options, a text input box, etc -- but for simplicity let's just add another link button:
<pre>
<a href="javascript:void(0);" onclick="loadNewVideo('tFI7JAybF6E', 0);">load</a>
</pre>
And there you have it custom, chromeless movie player that you can control with JavaScript.
== Conclusion ==
Now you know how to control YouTube movie players and hopefully feel comfortable customizing them to fit your own site. If JavaScript isn't you bag, there's also a very similar (in function) ActionScript API that you can use to build your own controls and load chromeless players.
Now you may be wondering, how can I get some YouTube movie data to display on my site? For instance maybe you'd like to grab all the movies you've marked as favorites and display them on your blog? Or maybe you want to grab your own movies for display elsewhere.
Well, read on to our next installment when we'll tackle the other half of the YouTube API -- The Data API.
|
