Results 1 to 3 of 3

Thread: Executing code after a youtube video has finished

  1. #1
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

    Default Executing code after a youtube video has finished

    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.
    Last edited by molendijk; 05-01-2013 at 11:25 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    molendijk (05-01-2013)

  4. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,380
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    33

Similar Threads

  1. Loading YouTube videos using the most recent YouTube embed code
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 11
    Last Post: 05-28-2012, 11:04 PM
  2. Replies: 3
    Last Post: 06-10-2011, 05:11 AM
  3. Using Lightbox with Youtube Video
    By vanbao in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 02-04-2008, 07:21 PM
  4. embeding youtube video
    By ferlach in forum HTML
    Replies: 11
    Last Post: 01-05-2008, 07:28 PM
  5. Executing PHP code in a ASP page
    By codeexploiter in forum ASP
    Replies: 3
    Last Post: 08-31-2006, 09:25 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •