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)?
enablejsapi=1
. If they are in a database it should be fairly easy to change the src
attribute. You might need some regex if they are statically inserted into HTML files.
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>
What you may want to do is include a script on all pages that does the following ... 1. find the youtube-iframe : searching for it by width and height by title or by finding www.youtube.com in its source. You can do that by ... - looping through the window.frames by a for-in loop and then filter out by the properties
inject jscript in the iframe of the current page adding the onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspx Add the event listeners etc..
Hope this helps
Success story sharing
autoplay
parameter -- addplayerVars: { autoplay: '1' }
to the initialization arguments. See developers.google.com/youtube/player_parameters for more information.