I am working on a site that has a ton of embedded youtube videos, the client wants to show a popup whenever a video stops splaying.
I looked at the youtube api and there seems to be a way to detect when a video ends:
http://code.google.com/apis/youtube/js_api_reference.html
but I can't embed the videos like they mentioned on that page since the videos are all already on the site (thousands that have been added manually by pasting embed code).
Is there a way to detect the ending of these videos without changing any of the existing videos (using javascript)?
This can be done through the youtube player API:
Working example:
<div id="player"></div>
<script src="http://www.youtube.com/player_api"></script>
<script>
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
width: '640',
height: '390',
videoId: '0Bmhjf0rKe8',
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
// autoplay video
function onPlayerReady(event) {
event.target.playVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
alert('done');
}
}
</script>