Pardon the double post, but I wanted to make sure that the code here got into it's own post, just to save confusion. As I said right above, had I read all of the documents, I would have seen that the reason my copy and paste didn't work was because I didn't have the code running on a server. The flash player used by YouTube has built-in security features to prevent the player being used in a malicious fashion (nice). Anyway, after I got the code on my server, I was able to modify it and move stuff around so that the player stopped playing whenever it was told to stop playing. The solution isn't entirely satisfactory though, because once the video is stopped, it can't be restarted from the beginning without reloading the player and the video. My quick and dirty solution was to reload the page. In real life, one would only want to reload the div containing the player to save on reload times and server load.
Anyway, here is the HTML code, which was modified from the link I gave above at
http://code.google.com/apis/youtube/js_example_1.htmlCODE
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>YouTube Pause_Video Example</title>
<script src="http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</head>
<body id="page">
<!--Start of player code -->
<div>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
// allowScriptAccess must be set to allow the Javascript from one domain to access the swf on the youtube domain
var params = { allowScriptAccess: "always" };
// this sets the id of the object or embed tag to 'myytplayer'. You then use this id to access the swf and make calls to the player's API
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/vuz0CLjYKw8&hl&border=0&enablejsapi=1&playerapiid=ytplayer",
"ytapiplayer", "425", "356", "8", null, null, params, atts);
</script>
</div>
<!--End of player code-->
</body>
</html>
Depending on which video you want to embed, all you need to do is change the part that says
CODE
"http://www.youtube.com/v/vuz0CLjYKw8&hl"
YouTube will give you the embed link, of which you only need the http path.
The next part of the operation is a javascript page. I moved all of those to a separate page just to make the HTML more clean.
CODE
//custom.js
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
setInterval(updateytplayerInfo, 250);
updateytplayerInfo();
ytplayer.addEventListener("onStateChange", "onytplayerStateChange");
ytplayer.addEventListener("onError", "onPlayerError");
}
function onytplayerStateChange(newState) {
setytplayerState(newState);
}
function onPlayerError(errorCode) {
alert("An error occurred: "+ errorCode);
}
function updateytplayerInfo() {
var time = ytplayer.getCurrentTime();
//change the value of stopTime. Currently it is set to 5 seconds
var stopTime=5;
if(time>stopTime){
if(ytplayer){
ytplayer.pauseVideo();
time =0;
document.location.reload();
}
}
}
The only real magic taking place there is in the last function called updateplayerInfo. The variable stopTime simply needs to be set to the time when you want the video to stop. The HTML code that calls this javascript page expects it to be in the same directory as the HTML page is located. If you decide to put the javascript in a different location, you will need to change the path name.
I think it is worth repeating; this will not work unless the code is running from a server.