Redirect to another URL after embedded YouTube video ends - possible?

by Brandon Tanner 15 replies
Anyone know if this can be done by inserting some HTML or Javascript into the embed code? I don't think a time-delayed redirect would be good, as it would redirect some viewers too early (for example those that get hung up with longer video buffering times, etc).

Is there a simple way to detect when the video has finished playing, then redirect based on that?

Thanks
#programming #embedded #ends #redirect #url #video #youtube
  • you can do this if you alter the embed code to use the JW Player rather than the default YouTube player.

    You can then attach an "event listener" that fires when the video ends. This listener function can redirect the user to the new page.
    Signature
    {{ DiscussionBoard.errors[350770].message }}
    • Profile picture of the author Brandon Tanner
      Originally Posted by musicinstinct View Post

      you can do this if you alter the embed code to use the JW Player rather than the default YouTube player.

      You can then attach an "event listener" that fires when the video ends. This listener function can redirect the user to the new page.
      Hey musicinstinct,

      Thanks for your repsonse. Do you know how to do this? I'll be glad to Paypal someone to do it for me. Shoot me a PM if you're interested.
      Signature

      {{ DiscussionBoard.errors[350924].message }}
      • Originally Posted by Brandon Tanner View Post

        Do you know how to do this? I'll be glad to Paypal someone to do it for me. Shoot me a PM if you're interested.
        Three steps. It's a bit tricky, so if you can't work this out let me know and I can have a go for you:

        1) Use the JW Player Wizard to get your embed code.

        Setup Wizard | LongTail Video

        Use the example setup called "flvplayer with a youtube video" and in the "file properties" section of flashvars change the file setting to your YouTube URL. You can also change the color or layout of the player if you wish, and set it to autostart under the "Behaviour" options.

        2) Click update preview and code to get your player code. This code works along with three other files that are downloaded as part of the JWPlayer bundle. Your page with the code needs to be uploaded along with "swfobject.js", "player.swf", and "yt.swf". You need to change the bit of code that was generated so that swfobject.js and player.swf reference your copies of the files.

        3) You can then add the extra "state monitor" code that I have included below. This monitors the "state" of the player and redirects to google.com when it detects that the player has finished:

        Code:
          <script type='text/javascript' src='swfobject.js'></script>
          <div id='mediaspace'>This video requires Javascript and Flash</div>
          <script type='text/javascript'>
            var player = null;
            function playerReady(thePlayer) {
              player = document.getElementsByName('ply')[0];
        	    addListeners(); 
            }
            function stateMonitor(obj)
            {
              if(obj.newstate == 'COMPLETED')
              {
                // load a new page
                window.location = 'http://www.google.com';
              }
            };
            function addListeners() {
        	    if (player) { player.addModelListener("STATE", "stateMonitor"); } 
        	    else { setTimeout("addListeners()",100); }
            }
            var s1 = new SWFObject('player.swf','ply','470','320','9','#ffffff');
            s1.addParam('allowfullscreen','false');
            s1.addParam('allowscriptaccess','always');
            s1.addParam('flashvars','file=http://uk.youtube.com/watch%3Fv%3DFgBUqJzgvBo&autostart=true');
            s1.write('mediaspace');
          </script>

        p.s. the JW Player - you'll have seen it everywhere - is free for non-commercial use. License for commercial site costs 30 euros. There may be an alternative free player, or there may be a way to do this using YouTube's API... I've only really used the JWPlayer for myself.
        Signature
        {{ DiscussionBoard.errors[351570].message }}
        • Profile picture of the author Brandon Tanner
          musicinstinct you rock! Just implemented the script and it works like a charm

          I'd like to send a little extra Christmas cheer your way. PM me your Paypal email.

          Also, do you do any custom php work? I've got a moderate sized php project I'll be looking to hire someone for soon.

          Thanks!
          Signature

          {{ DiscussionBoard.errors[351974].message }}
          • Profile picture of the author thehypnotist
            {{ DiscussionBoard.errors[433676].message }}
            • Profile picture of the author 4morereferrals
              I bit off this topic - but Im intent on using THAT redirect script -pretty sweet!

              How to do that on wordpress?

              Whats the best way to stream a .wmv file - having firefox issues... I also am planning on converting it to .flv - flash. Is the a good free converter for this that generates decent video? My .wmv source was a recorded gotowebinar - so the quality isnt World Class to start with ... dont want to lose too much more quality.

              Any help would be appreciated and Thanks to all here - good stuff!
              Signature
              Rank Ascend Network - High PR Links / Guaranteed Rankings Increase
              {{ DiscussionBoard.errors[435626].message }}
              • Profile picture of the author 4morereferrals
                Ive got a little test video on a html page going off my site and that code from Darren above is pretty slick ...

                Now ... how to replicate that sweetness in wordpress?

                Anyone ?
                Signature
                Rank Ascend Network - High PR Links / Guaranteed Rankings Increase
                {{ DiscussionBoard.errors[436292].message }}
                • Profile picture of the author 4morereferrals
                  Ive found a WP Plugin and a developer willing to code the Listener event monitoring and end of video redirect code into his sweet little plug in for $50.

                  Anyone else interested in DONATING to the idea with me?

                  An example useage for me is ...

                  I want some one to see my video - but not all the bonus items until it ends - so as to let the video build the sales tension to the point its time to pull out the CC :-)

                  At the video's end - the site does a redirect to another page - with the same video - look feel layout but with the included bonus items, testimonials displayed and Call to Action.

                  There's a hundred and 1+ uses - for this, and its a PITA to do it in a wordpress blog.

                  Unless you guys /gals know a way to do this with JW's FLash Vid player in word press - please help a bruhtha out! I couldnt figure out how to execute the required JS in WP safely. plain html site page - the above code from Darren works a treat. wordpress the ways I tried pukes on it.

                  PM or reply in here and we'll git r done!
                  Signature
                  Rank Ascend Network - High PR Links / Guaranteed Rankings Increase
                  {{ DiscussionBoard.errors[447640].message }}
                  • Profile picture of the author webvideozz
                    Hi. I have just checked out FLV Producer. They have developed a WP pugin. You can download their easy, three-step setup software for 97 bucks and additionally you can choose a WP upgrade for $15 extra.

                    DO NOT pay for a webmaster for something already in the market.

                    Here is the link:

                    flvproducer[dot]com
                    [slash]fullstory[dot]html

                    Sorry for that, I am new here under some restrictions regardig offering links.
                    Read along it and right before the checkout, they will give you an offer.

                    All the best
                    oliveR
                    {{ DiscussionBoard.errors[524761].message }}
        • Darren,
          your post has been very helpful to me. It's quite hard to find the answer to this question on the Web, so thanks again for this effective piece of code !

          Originally Posted by Darren Mothersele View Post

          Three steps. It's a bit tricky, so if you can't work this out let me know and I can have a go for you:

          1) Use the JW Player Wizard to get your embed code.

          Setup Wizard | LongTail Video

          Use the example setup called "flvplayer with a youtube video" and in the "file properties" section of flashvars change the file setting to your YouTube URL. You can also change the color or layout of the player if you wish, and set it to autostart under the "Behaviour" options.

          2) Click update preview and code to get your player code. This code works along with three other files that are downloaded as part of the JWPlayer bundle. Your page with the code needs to be uploaded along with "swfobject.js", "player.swf", and "yt.swf". You need to change the bit of code that was generated so that swfobject.js and player.swf reference your copies of the files.

          3) You can then add the extra "state monitor" code that I have included below. This monitors the "state" of the player and redirects to google.com when it detects that the player has finished:

          Code:
            <script type='text/javascript' src='swfobject.js'></script>
            <div id='mediaspace'>This video requires Javascript and Flash</div>
            <script type='text/javascript'>
              var player = null;
              function playerReady(thePlayer) {
                player = document.getElementsByName('ply')[0];
                  addListeners(); 
              }
              function stateMonitor(obj)
              {
                if(obj.newstate == 'COMPLETED')
                {
                  // load a new page
                  window.location = 'http://www.google.com';
                }
              };
              function addListeners() {
                  if (player) { player.addModelListener("STATE", "stateMonitor"); } 
                  else { setTimeout("addListeners()",100); }
              }
              var s1 = new SWFObject('player.swf','ply','470','320','9','#ffffff');
              s1.addParam('allowfullscreen','false');
              s1.addParam('allowscriptaccess','always');
              s1.addParam('flashvars','file=http://uk.youtube.com/watch%3Fv%3DFgBUqJzgvBo&autostart=true');
              s1.write('mediaspace');
            </script>
          p.s. the JW Player - you'll have seen it everywhere - is free for non-commercial use. License for commercial site costs 30 euros. There may be an alternative free player, or there may be a way to do this using YouTube's API... I've only really used the JWPlayer for myself.
          Signature
          I'm a Product Launch Manager, personally trained by Jeff Walker.

          Click here to get a free video training on How to Make Money from your List.
          {{ DiscussionBoard.errors[5237499].message }}
  • Profile picture of the author bz1406
    Thank guys for your tips, it really work with me.
    {{ DiscussionBoard.errors[525359].message }}
  • Profile picture of the author tomson
    Currently in development an application that can have links and buttons on the youtube movie itself - If you would like to offer unique features that you would be happy to have please PM and I will send you a free copy when the first beta version.

    Tom
    Signature

    Who Dares - Wins!

    {{ DiscussionBoard.errors[701779].message }}
  • Profile picture of the author xandycom
    Tomson, YGM. I would be thrilled to be a beta tester for that. Sounds great.
    {{ DiscussionBoard.errors[1027793].message }}
  • Profile picture of the author Jono Dsouza
    Hi Darren Mothersele, (or anyone who can help...)

    I am using Wordpress and the JW Player WP Plugin to embed video on my blog.

    I am trying to trigger a re-direct at the end of the video when it reaches the end so that a new specified page opens instead.

    Is there a simple way to do this using the popular plugin (wordpress dot org/extend/plugins/jw-player-plugin-for-wordpress/) with a combination of some code?

    I noticed that there is a onComplete(callback) function that can be used using Javascript (see longtailvideo dot com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference#Function)

    but is there a simple way to integrate this into my Wordpress page?

    Any help is highly appreciated!~


    P.S someone sent me this code below, but I don't see how I can use that with my application using just the WP plugin:

    <div id='container'>Loading the player ...</div>

    <script type='text/javascript'>
    jwplayer('container').setup({
    flashplayer: '/jwplayer/player.swf',
    file: '/uploads/video.mp4',
    height: 270,
    width: 480,
    events: {
    onComplete: function(event) {redirectPage('example dot com/')}
    }
    });

    function redirectPage(url){
    window.location=url;
    }
    </script>
    {{ DiscussionBoard.errors[5414408].message }}
  • Profile picture of the author Mondi
    Darren - you're a life saver!

    Just put your code as a BB Code on my site, and it's working like a total treat. You've just ended a three-week wild goose chase..

    Thanks heaps, mate!

    Quick one - if I want the player to adopt JW's 'Schoon' skin, and if I stored the Shoon.zip in my site's root in a folder called /video/, where and how in this code should I make reference to this skin?

    In other words: what's the line of code, and where should it be placed?

    Thanks millions in advance, Darren.

    Mondi
    {{ DiscussionBoard.errors[5730150].message }}

Trending Topics