PDA

View Full Version : Javascript redirect.. How?

MrLeN
03-07-2009, 10:28 AM
In the code below, which if you paste into a html document and view in your browser -- will work, I need to put in some JavaScript which detects that player state, and if it is 0 then the page redirects.

Can you show me how I can do this?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />

<title>YouTube Javascript API Example page</title>
<script src="http://swfobject.googlecode.com/svn/tags/rc3/swfobject/src/swfobject.js" type=
"text/javascript">
</script>
<style type="text/css">
/*<![CDATA[*/

body {
font-family: verdana, helvetica;
background-color: white;
}

#timedisplay {
border: solid 1px red;
width: 50px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[

function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}

function setytplayerState(newState) {
updateHTML("playerstate", newState);
}

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() {
updateHTML("bytesloaded", getBytesLoaded());
updateHTML("bytestotal", getBytesTotal());
updateHTML("videoduration", getDuration());
updateHTML("videotime", getCurrentTime());
updateHTML("startbytes", getStartBytes());
}

// functions for the api calls
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}

function pause() {
if (ytplayer) {
ytplayer.pauseVideo();
}
}

function stop() {
if (ytplayer) {
ytplayer.stopVideo();
}
}

function getPlayerState() {
if (ytplayer) {
return ytplayer.getPlayerState();
}
}

function seekTo(seconds) {
if (ytplayer) {
ytplayer.seekTo(seconds, true);
}
}

function getBytesLoaded() {
if (ytplayer) {
return ytplayer.getVideoBytesLoaded();
}
}

function getBytesTotal() {
if (ytplayer) {
return ytplayer.getVideoBytesTotal();
}
}

function getCurrentTime() {
if (ytplayer) {
return ytplayer.getCurrentTime();
}
}

function getDuration() {
if (ytplayer) {
return ytplayer.getDuration();
}
}

function getStartBytes() {
if (ytplayer) {
return ytplayer.getVideoStartBytes();
}
}

function mute() {
if (ytplayer) {
ytplayer.mute();
}
}

function unMute() {
if (ytplayer) {
ytplayer.unMute();
}
}
//]]>
</script>
</head>

<body id="page">
<div>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div><script type="text/javascript">
//<![CDATA[

// 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/ma9I9VBKPiw&amp;border=0&amp;enablejsapi=1&amp;playerapiid=ytplayer",
"ytapiplayer", "425", "344", "8", null, null, params, atts);

//]]>
</script> <!-- HTML below here is for display of the player info + state -->

<div>
Player state: <span id="playerstate">--</span>
</div><br />
<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> |
<a href="javascript:void(0);" onclick="mute();">Mute</a> | <a href="javascript:void(0);"
onclick="unMute();">Unmute</a> |<br />
<br />

<form action="" onsubmit="seekTo(document.getElementById('seekto').value); return false;">
<div>
<input id="seekto" type="text" size="4" /><input type="submit" value="Seek to" />
</div>
</form><br />

<div>
Duration: <span id="videoduration">--:--</span> | Current Time: <span id=
"videotime">--:--</span>
</div><br />

<div id="bytesdisplay">
Bytes Total: <span id="bytestotal">--</span> | Start Bytes: <span id="startbytes">--</span> |
Bytes Loaded: <span id="bytesloaded">--</span>
</div>
</div>
</body>
</html>
haukke45
03-11-2009, 08:10 PM
it seeams like you got most of it down but when u stop it u cannot replay it suggestion maybe if you put a refresh page (refresh object or reset ytplayer when you click stop as well so you can play it after you had stoped it. not sure though.
rangana
03-12-2009, 03:11 AM
Read the API guide:
http://code.google.com/apis/youtube/js_api_reference.html#Functions

You can utilize player.getPlayerState():Number function which returns the player's state.

Hope that helps.