Executing code after a youtube video has finished

**molendijk** · 05-01-2013, 10:55 AM

Hello guys,
I have this script on a test page:

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<script src="http://www.youtube.com/player_api"></script>
<script>
// Script by jscheuer1. Works in Firefox, Chrome, IE 8 and up, Opera. Page must be live in order for the script to work with IE.
var controllable_player;
function onYouTubeIframeAPIReady() {
controllable_player = new YT.Player('controllable_player'); 
new YT.Player('controllable_player').setVolume(100);
}
if(window.opera){
addEventListener('load', onYouTubeIframeAPIReady, false);
}
</script>

</head>

<body >
Script by jscheuer1. Works in Firefox, Chrome, IE 8 and up, Opera. Page must be live in order for the script to work with IE.<br>
<iframe id="controllable_player" style="position: relative; height: 420px; width: 620px" src="http://www.youtube.com/watch_popup?v=AVgbEkBWuqs" ></iframe>
<br>
<a href="javascript: void(0)" onclick="controllable_player.playVideo(); return false">play</a> 
<a href="javascript: void(0)" onclick="controllable_player.pauseVideo(); return false">pause</a> 
<a href="javascript: void(0)" onclick="controllable_player.stopVideo(); return false">stop</a> 
<a href="javascript: void(0)" onclick="alert(controllable_player.getPlayerState()); return false">state</a> 
<a href="javascript: void(0)" onclick="controllable_player.seekTo(100, true); return false">seek to 100</a> 
<a href="javascript: void(0)" onclick="controllable_player.mute(); return false">mute</a> 
<a href="javascript: void(0)" onclick="controllable_player.unMute(); return false">unmute</a> 
<a href="javascript: void(0)" onclick="controllable_player.setVolume(10); return false">set volume to 10</a> 
<a href="javascript: void(0)" onclick="controllable_player.setVolume(100); return false">set volume to 100</a> 
<a href="javascript: void(0)" onclick="alert(controllable_player.getDuration()); return false">duration</a> 
<a href="javascript: void(0)" onclick="alert(controllable_player.getCurrentTime()); return false">current time</a> 
</body>
</html>

It works well (thanks to John Scheuer, who suggested this in some previous post). The video is of type 'watch_popup'.
What I want to add is some code producing an alert (or something else, like a redirect to another page etc.) when the video has finished. I tried everything, but no luck so far.
Any ideas?
EDIT: demo here.

**jscheuer1** · 05-01-2013, 02:26 PM

Something like (additions highlighted):

Code:

<script>
// Script by jscheuer1. Works in Firefox, Chrome, IE 8 and up, Opera. Page must be live in order for the script to work with IE.
var controllable_player,
statechange = function(e){
	if(e.data === 0){alert('Video Ended');}
};
function onYouTubeIframeAPIReady() {
controllable_player = new YT.Player('controllable_player'); 
new YT.Player('controllable_player', {events: {'onStateChange': statechange}}).setVolume(100);
}
if(window.opera){
addEventListener('load', onYouTubeIframeAPIReady, false);
}
</script>

But you have two new YT.Player() calls. I'm not sure why or if in fact you really need both of them or how they would be combined, or if you need both which or if both should get the events object assigned to it.

But maybe:

Code:

<script>
// Script by jscheuer1. Works in Firefox, Chrome, IE 8 and up, Opera. Page must be live in order for the script to work with IE.
var controllable_player,
statechange = function(e){
	if(e.data === 0){alert('Video Ended');}
};
function onYouTubeIframeAPIReady() {
controllable_player = new YT.Player('controllable_player', {events: {'onStateChange': statechange}}); 
controllable_player.setVolume(100);
}
if(window.opera){
addEventListener('load', onYouTubeIframeAPIReady, false);
}
</script>

See also:

https://developers.google.com/youtub..._api_reference

Oh, and I seem to recall that the only reliable cross browser onStateChange is believed to be 1, for play. But things may have improved since then.