In order to use Youtube's API, a developer must first acquire a unique Developer ID — it's an additional property that upon reception, is attached to the developer's YouTube account. The information that is available to developers is similar to the information that can be acquired by accessing YouTube's many RSS feeds.
As of March 2006, API calls from Flash have been disabled due to security concerns.
Tutorial:
This time I'll let you embed the code first, and then I'll explain what will the code do
1. Put this inside <head>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>
<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
updateytplayerInfo();
ytplayer.addEventListener("onError");
}
// functions for the api calls
function loadNewVideo() {
if (ytplayer) {
ytplayer.loadVideoById('iLaTDP3j3sw','0');
}
}
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}
function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}
</script>
2. Put this into the body
<body onClick = "loadNewVideo()" >
<table width="760" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#ECE9D8" >
<tr>
<td align="center"><div>
<!-- embed the player -->
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript" >
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "760", "480", "8", null, null, params, atts);
</script>
<br />
</div>
</div>
</td>
</tr>
<tr>
<td align="center">Press Anywhere to PLAY / REPLAY or</td>
</tr>
</table>
</body>
Explanation:
1. Here is the usage of google ajax libraries API and the loader of SWFObject
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("swfobject", "2.1");
</script>
2. Declaration that the script uses javascript
<script type="text/javascript">
...
</script>
3. When the player is ready, It will load the myytplayer
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
updateytplayerInfo();
ytplayer.addEventListener("onError");
}
4. Call the source of the video
function loadNewVideo() {
if (ytplayer) {
ytplayer.loadVideoById('iLaTDP3j3sw','0');
}
}
5. Play the loaded video
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}
6. Pause the loaded video
function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}
7. Stop the loaded video
function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}
8. When the body is clicked, it will load the video and play it
<body onClick = "loadNewVideo()" >
...
</body>
9. The var params allows access to use script. The var atts sets the id of the object or embed tag to 'myytplayer'. The last line is to embed the player inside the website
<script type="text/javascript" >For more info, you could go to :
var params = { allowScriptAccess: "always", bgcolor: "#cccccc" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "760", "480", "8", null, null, params, atts);
</script>
1. http://code.google.com/apis/youtube/getting_started.html
2. http://code.google.com/apis/youtube/js_api_reference.html
3. http://code.google.com/apis/youtube/chromeless_example_1.html
No comments:
Post a Comment