Action when Video Ends

Posted: Thu, 2009-04-16 11:15 robin

    <script type="text/javascript">
      var player    =  null;
      var playlist  =  null;
      function playerReady(obj)
      {
        player = gid(obj.id);
        addListeners();
      };
      function addListeners()
      {
        playlist = player.getPlaylist();
        if((playlist !== null) && (playlist !== undefined))
        {
          player.addModelListener('STATE', 'stateMonitor');
        }
        else
        {
          setTimeout("addListeners();", 100");
        }
      };
      function stateMonitor(obj)
      {
        if(obj.newstate == 'COMPLETED')
        {
          // drop out of fullscreen
          // this.window.focus();
          // load a new page
          // window.location = 'http://www.google.com';
        }
      };
      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>

uncomment the action that you want (drop out of fullscreen or load a new page) or add your own action

Posted: Thu, 2009-04-16 12:04 peter

thanks so far, robin. i hope it works. :)

Thx,
Peter

Posted: Tue, 2009-04-21 12:38 kenneth

This worked perfectly for me, I used it to trigger an AJAX script for when each item in the playlist ends.

Thank you for posting this!

Posted: Tue, 2009-04-28 14:34 john

I keep getting this error in both FF3.0.9 and IE 7.

player.addModelListener('STATE', 'stateMonitor');

Object doesn't support this property or method.

Posted: Tue, 2009-04-28 14:40 robin

@john,

Have you assigned the player ID to the name and id attributes and the id flashvar in your player embedding code?

Posted: Tue, 2009-04-28 17:24 john

Yup. But I've already changed things. I am not going to use JS to control the player. It's just too much headache to figure out why it didn't work. We switched to manual control.

Posted: Mon, 2009-05-25 14:39 Kaeesh

@robin

Hi:

thanks in advance. I was looking for this. But am not at all expert on javascript. Will you please guide where I should place your code?

Regards
Kaeesh

Posted: Tue, 2009-05-26 20:29 kevin

I need to do the same thing but I am lost. Once the video is over then redirect to a new page or frame.

I have tried several things but nothing seems to work. any help would be great.

Posted: Tue, 2009-05-26 20:53 BaP

Simple copy and paste the code in the head of your page.

Uncomment the action that you want or add your own.

This will load Google:

function stateMonitor(obj)
      {
        if(obj.newstate == 'COMPLETED')
        {
          // drop out of fullscreen
          // this.window.focus();

          // load a new page
          <strong>window.location = 'http://www.google.com';</strong>
        }
      };

Posted: Tue, 2009-05-26 22:42 kevin

Thanks for the help but I am still having issues and can not get it to work.

Here is the code that I am using. again thanks for any help I can get.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>JW Player for Flash</title>
	<style type="text/css">
		body { background-color: #fff; padding: 0 20px; color:#000; font: 13px/18px Arial, sans-serif; }
		a { color: #360; }
		h3 { padding-top: 20px; }
		ol { margin:5px 0 15px 16px; padding:0; list-style-type:square; }
	</style>
<script type="text/javascript">
function stateMonitor(obj)
{
if(obj.newstate == 'COMPLETED')
{
// drop out of fullscreen
// this.window.focus();
load a new page
window.location = 'http://www.google.com';
}
};
</script>
</head>
<body>
	<!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
	<script type="text/javascript" src="swfobject.js"></script>
	<script type="text/javascript">
		swfobject.registerObject("player","9.0.98","expressInstall.swf");
	</script>
	<object id="player" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="328" height="200">
		<param name="movie" value="player-viral.swf" />
		<param name="allowfullscreen" value="true" />
		<param name="allowscriptaccess" value="always" />
		<param name="flashvars" value="file=video.flv&image=preview.jpg" />
		<object type="application/x-shockwave-flash" data="player-viral.swf" width="328" height="200">
			<param name="movie" value="player-viral.swf" />
			<param name="allowfullscreen" value="true" />
			<param name="allowscriptaccess" value="always" />
			<param name="flashvars" value="file=video.flv&image=preview.jpg" />
			<p><a href="http://get.adobe.com/flashplayer">Get Flash</a> to see this player.</p>
		</object>
	</object>
	<!-- END OF THE PLAYER EMBEDDING -->
</body>
</html>

Posted: Wed, 2009-05-27 00:58 BaP

1) Copy ALL of the code from robin's post.

2) That object code simply won't light up the API cross-browser; use the equivalent swfobject code to embed the player.

Posted: Thu, 2009-05-28 16:33 daveb

I know nothing about scripting, but two items I found were that that DW complained about the 100" in the script. I removed the quotation and DW was happy.

I also found the script incompatible with Longtails ltassrv ad script - when I removed their ads from the video the above script ran flawlessly.

Great script btw, thx!

-d

Posted: Thu, 2009-05-28 18:11 BaP

The 100" is a genuine typO.

The interaction with ltassrv shouldn't be an issue, but because I don't use ltassrv or have access to it, I can't test & debug that.

The v4.5.x players don't return undefined when the playlist is not yet available.

This is a better addListeners() function:

      function addListeners()
      {
        try
        {
          playlist = player.getPlaylist();
        }
        catch(e)
        {
          setTimeout("addListeners();", 100);
        }
        //...whatever you want to do here, such as:
        player.addControllerListener('ITEM', 'itemMonitor');
        itemMonitor({index:0});
      };

Posted: Tue, 2009-06-23 20:49 Fox

hi there,

i really need to get this done and I'm having troubles.

here is the code that I'm using and hopefully someone can help me fix this:

<title>index2</title>
<head>
  <script type="text/javascript">
      var player    =  null;
      var playlist  =  null;
      function playerReady(obj)
      {
        player = gid(obj.id);
        addListeners();
      };
      function addListeners()
      {
        try
        {
          playlist = player.getPlaylist();
        }
        catch(e)
        {
          setTimeout("addListeners();", 100);
        }
        //...whatever you want to do here, such as:
        player.addControllerListener('ITEM', 'itemMonitor');
        itemMonitor({index:0});
      };
      function stateMonitor(obj)
      {
        if(obj.newstate == 'COMPLETED')
        {
           
		   drop out of fullscreen
           this.window.focus();
           load a new page
           window.location = 'http://www.google.com';
        }
      };
      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>
</head>
<body><script type="text/javascript" src="swfobject.js"></script>
<div id="player">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('player.swf','mpl','520','480','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('flashvars','&file=asenoisefinal.flv&link=///Macintosh/users/extravagante/documents/matrix/asenoisefinal.flv&autostart=true');
so.write('player');
</script>
</body>
</html>

Posted: Tue, 2009-06-23 21:04 Bap

@Fox,

What are you trying to accomplish?

No mind readers here...

Posted: Tue, 2009-06-23 21:17 Fox

@Bap

I'm trying to make the video redirect to another page when it ends. I use google.com in that code but just that an example. It doesn't redirect anyway.

Posted: Tue, 2009-06-23 21:36 Bap

The player's behavior has changed a bit since that code was posted.

You have uncommented the comments, which breaks all of the JavaScript.

Code for the v4.5.223 player. http://developer.longtailvideo.com/trac/log/trunk/as3/player.swf?rev=224

    <script type="text/javascript">
      var player    =  null;
      var playlist  =  null;
      function playerReady(obj)
      {
        player = gid(obj.id);
        addListeners();
      };
      function addListeners()
      {
        playlist = player.getPlaylist();
        if(playlist.length > 0)
        {
          player.addModelListener('STATE', 'stateMonitor');
        }
        else
        {
          setTimeout("addListeners();", 100);
        }
      };
      function stateMonitor(obj)
      {
        if(obj.newstate == 'COMPLETED')
        {
          //...load a new page when the media file completes playing
          window.location = 'http://www.google.com';
        }
      };
      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>

Posted: Tue, 2009-06-23 21:55 Fox

@Bap

Thanks a lot for your help. I still can't make the redirection though. I'm using version v4.5.223 but no luck. Am I supposed to change something in the code you gave me?

I'm still pasting it in the head section as stated in the beginning of the thread.

Thanks in advance.

Posted: Tue, 2009-06-23 23:16 BaP

@Fox,

The code's good. Here's the exact code, copied & pasted from my post, redirecting on completion. I added a few alerts so you can see the results as the browser executes the code.

http://willswonders.myip.org:8074/Simple_OnCompletion.html

Are you testing online?

The JavaScript API only functions online because of the browser's and Adobe Flash Player's JavaScript sandboxing.

Posted: Wed, 2009-06-24 09:34 Fox

Thanks once again for your help. I'm not testing online, and can't test online right now. Will came back later to post how it went.

Posted: Wed, 2009-06-24 09:41 lost

You're welcome.

Good Luck! :)

Posted: Wed, 2009-06-24 12:41 DB

Will the same code work for the WMV player?

http://www.longtailvideo.com/players/jw-wmv-player/

Posted: Wed, 2009-06-24 13:36 lost

The basic idea will work — listen for 'COMPLETION', then do something.

The implementation will probably be quite different, depending on what code the WMV player uses for it's API — does it even have an API???

Posted: Fri, 2009-06-26 15:06 James

any ideas why this won't work. It gives me the alerts, but won't do the url forwarding. The url forward works on its own though..

<script type="text/javascript">
	var player;
	var playerName;
	function playerReady(obj)
	{
			alert('the vidoeplayer '+obj['id']+' has been found');
			alert('hello 1');
			playerName = document.getElementById(obj['id']);
		if ((obj['id']) == "ply66") 
		{
			alert('inside hello');
			function playerReady(obj)
			{
			player = gid(obj.id);
			player.addModelListener('STATE', 'stateMonitor');
			};
			function stateMonitor(obj)
			{
				if(obj.newstate == 'COMPLETED')
				{
				 // drop out of fullscreen
				this.window.focus();
				// load a new page
				window.location = 'http://yahoo.com';
				}
			};
			function gid(name)
			{
				return document.getElementById(name);
			};
		}
	}
</script>

Posted: Fri, 2009-06-26 15:31 James

nevermind-fixed it. This works for forwarding player to a URL based on its playerID (thanks for the bit on url forwarding):

<script type="text/javascript">
	var player;
	var playerName;
	function playerReady(obj)
	{
		alert('hello 1');
		player = gid(obj.id);
		player.addModelListener('STATE', 'stateMonitor');
	};
	function stateMonitor(obj)
	{
		if((obj.newstate == 'COMPLETED') && ((obj['id']) =="ply66"))
		{
			// drop out of fullscreen
			this.window.focus();
			// load a new page
			window.location = 'http://yahoo.com';
		}
	};
	function gid(name)
	{
		return document.getElementById(name);
	};
</script>

Posted: Fri, 2009-06-26 15:34 lost

Sorry, I can't make any sense out of your code.

This is what works with the current release v4.5.224 player.

    <script type="text/javascript">
      var player    =  null;
      var playlist  =  null;
      function playerReady(obj)
      {
        alert('Player ID: ' + obj.id);
        addListeners();
      };
      function addListeners()
      {
        playlist = player.getPlaylist();
        if(playlist.length > 0)
        {
          player.addModelListener('STATE', 'stateMonitor');
        }
        else
        {
          alert('Try Again!');
          setTimeout("addListeners();", 100);
        }
      };
      function stateMonitor(obj)
      {
        if(obj.newstate == 'COMPLETED')
        {
          // drop out of fullscreen
          this.window.focus();
          // load a new page
          window.location = 'http://yahoo.com';
        }
      };
      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>

Make sure that you have set the player's id in three places:

1) the name attribute,

2) the id attribute,

3) the id flashvar.

Posted: Mon, 2009-08-24 12:28 lost

The filename for the Test Page has been changed.

http://willswonders.myip.org:8074/Simple_OnCOMPLETED.html

Posted: Sun, 2009-09-06 09:22 Lucki

Can this happen on embed or only on JS?
Please help, i'm stucked.

Posted: Sun, 2009-09-06 10:21 lost

The JavaScript API usually doesn't work with the embed element. You can try giving the embed element both name and id attributes and also using the id flashvar. All three must be the same.

Otherwise, if you don't want to use swfobject to embed your Flash content, you can use the double-object method, which works.

See: http://www.longtailvideo.com/support/forum/Setup-Problems/13856/Multiple-playlists-on-blogger#msg939...

Posted: Thu, 2009-09-24 09:09 Heem

Man I am so confused. Can someone Put this in baby steps? becuase i am lost. Where do I put th eplayer ID....?

Posted: Sat, 2009-10-17 18:51 Stephen Montgome

Hi

Has anyone written an end action script in ASP.NET? I want to be able to execute an SQL Query only after a viewer has finished watching a video.

Thanks

Stephen

Posted: Fri, 2009-10-23 07:25 Zachary Ozer

Add a listener for ModelEvent.STATE and wait for event.newState == "COMPLETED"

Posted: Tue, 2009-12-08 12:50 Kolya

There's no COMPLETED state anymore.
Use IDLE instead.

http://developer.longtailvideo.com/trac/wiki/Player5Events

Posted: Wed, 2009-12-09 17:00 CNJ

Is it possible to use similar code, but instead of javascript to redirect the page, use javascript to insert html or css?

For instance:

<script type="text/javascript">
var player = null;
function playerReady(obj) {
player = document.getElementsByName(obj.id)[0];
player.addModelListener('STATE', 'stateMonitor');
};
function stateMonitor(obj) {
if(obj.newstate == 'COMPLETED') {
document.write('<style>#wrapper {width:200px;}</style>') ;
}
};
</script>

Posted: Fri, 2009-12-11 21:51 Kolya

The page would still have to be reloaded for the inserted CSS to have any effect. It should work with a HTML insertion though.
Not that I had checked your code, just basically.

Posted: Sun, 2009-12-13 21:39 Kevin

@Kolya,

This isn't the same as the COMPLETED state.

Using the IDLE state can fire simply when a user presses stop.

How are we to check for the COMPLETED state or when the player has actually finished playing in 5.x?

Posted: Sun, 2009-12-13 21:47 Kevin

Ah, we can change the state monitor to listen for this type of event instead.

						      var player    =  null;
      var playlist  =  null;
      function gid(name)
      {
        return document.getElementById(name);
      }
      function playerReady(obj)
      {
        //alert('Player ID: ' + obj.id);
				player = gid(obj.id);
        addListeners();
      };
      function addListeners()
      {
        playlist = player.getPlaylist();
        if(playlist.length > 0)
        {
						player.addModelListener('COMPLETE', 'stateMonitor');
        }
        else
        {
          //alert('Try Again!');
          setTimeout("addListeners();", 100);
        }
      };
      function stateMonitor(obj)
      {
				alert('Finished Player');
        if((obj.newstate == "IDLE") && (obj.oldstate == "PLAYING")) //  && (obj.oldstate == "PLAYING"
        {
          // drop out of fullscreen
          //this.window.focus();
          // load a new page
          //window.location = "";
        }
      }

Posted: Thu, 2009-12-17 20:36 Marilyn

There is still a COMPLETED state reported by ModelEvent.STATE.

You guys got the v5 plugins interface mixed up with the JSAPI.

The JSAPI for the v5 player is exactly the same as the JSAPI for the v4 player.

Posted: Thu, 2009-12-31 01:58 Moin

this code doesn't work man, tell me how can I jump to next track or media when a media file is ended?

Posted: Thu, 2009-12-31 02:36 Juliette

@Moin,

Post a link to your Test Page if you need further help.

Posted: Mon, 2010-01-04 13:20 Lacy

I'm trying to figure out how to get the player state of PLAYING ... using version 5.0 of the player. Not using the embed object for displaying the video. Video code:

<script type="text/javascript">
var so = new SWFObject('playerv5.swf','mpl','535','331','9');
so.addParam('allowscriptaccess','always');
so.addParam('allowfullscreen','true');
so.addParam('wmode', 'transparent');
so.addParam('flashvars','&image=122309.jpg&streamer=rtmp://domain.com/122309.flv&autostart=false&fullscreen=true&stretching=fill');
so.write('vucastvid');
</script>

trying to figure out how to STOP a jquery slideshow (id VUslider) when someone clicks PLAY on the video (player id vucastvid). Here's what I have now ... which is NOT working.

// Fires when the VIDEO player is succesfully initialized and drawn on the page
function playerReady(obj) {
  player = document.getElementById(obj['vucastvid']);
  // This line adds the listener.  
  player.addModelListener("STATE","stateHandler");
};
// This function is called every time the listener is fired
function stateHandler(obj) {
// if the VIDEO state is changed to "PLAYING"
  if(obj.newstate == "PLAYING") {
    // make the SLIDESHOW STOP
		alert('hey the player is playing!')
	//    $('.VUslider').base({'startStop':'true'});   
  }else {
   // do nothing because the video is not playing
  }
}

Posted: Mon, 2010-01-04 21:26 Juliette

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <script src="swfobject.js"</script>
    <script type="text/javascript">
      var player    =  null;
      var playlist  =  null;
      function playerReady(obj)
      {
        player = gid(obj.id);
        addListeners();
      };
      function addListeners()
      {
        playlist = player.getPlaylist();
        if(playlist.length > 0)
        {
          player.addModelListener('STATE', 'stateHandler');
        }
        else
        {
          setTimeout("addListeners();", 100);
        }
      };
      function stateHandler(obj)
      {
        if(obj.newstate == 'PLAYING')
        {
alert('PLAYING');
          $('.VUslider').base({'startStop':'true'});
        }
      };
      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>
  </head>
  <body>
    <div id="vucastvid" class="vucastvid"><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div>
    <script type="text/javascript">
      var so = new SWFObject('playerv5.swf', 'mpl', '535', '331', '9.0.124');
          so.addParam('allowscriptaccess',   'always');
          so.addParam('allowfullscreen',     'true');
          so.addParam('wmode',               'opaque');
          so.addVariable('streamer',         'rtmp://domain.com/application/instance');
          so.addVariable('file',             '122309.flv');
          so.addVariable('provider',         'rtmp');
          so.addVariable('image',            '122309.jpg');
          so.addVariable('stretching',       'fill');
          so.addVariable('autostart',        'false');
          so.write('vucastvid');
    </script>
  </body>
</html>

Posted: Tue, 2010-01-05 20:06 Lacy

I've gotten the event listeners to work correctly on v5 of the longtail player... it lets me know when the player is initialized, when it is playing, and when it comples ... but still working on getting it to stop the slider.

Here's my updated code ...

var player = null;
function playerReadyCallback(obj)  {
	player = document.getElementsByName(obj.id)[0];
    alert('the videoplayer '+obj['id']+' has been instantiated');
    player.addModelListener('STATE',     'stateMonitor');
}
function stateMonitor(obj) {
   currentState = obj['newstate'];
	if(currentState == 'PLAYING') {
	  alert ('the videoplayer '+obj['id']+'  is playing now!');
	  // $VUslider.startStop(false);  // Trigger slideshow stop 
	     }
	if(obj.newstate == 'COMPLETED') {
	  alert ('the videoplayer '+obj['id']+'  has stoped playing now!');
	  $VUslider.startStop(false);  // Trigger slideshow start   
  		}
}

Posted: Sun, 2010-01-17 00:07 Spidersilk

Excellent script - worked flawlessly on the first try for me.

I put the version posted by Lost on June 26 into the head section of the page, and the only change I made was to enter the URL I wanted it to redirect to. I didn't even have to set any IDs or anything - apparently whatever the default was was good enough for it to work.

This may be the most trouble-free bit of Javascript I have ever had the good fortune to stumble across. :-)

Posted: Tue, 2010-03-09 21:01 Gary

When and where are these functions called? Just listing functions won't work. Something has to be named, then there has to be an event like onLoad="thefunction(nameofObject)". Can anyone provide the complete code?

Posted: Wed, 2010-03-10 11:12 Blitch

Juliette posted the full page, there is no other code!

Posted: Sun, 2010-08-15 21:31 my

Hello friends,

Can somebody tell me how to call javascript functions on page and what parameters pass to functions.
Here is my embed code:

<EMBED name="player" pluginspage="http://www.macromedia.com/go/getflashplayer" align=middle src="http://localhost:49536/broom/flash/player.swf" 
                    type="application/x-shockwave-flash" flashvars='autostart=1&&showfsbutton=false&showicons=false&repeat=list&controlbar=none&screencolor=ffffff&file=playlist.aspx' 
                    quality="high" bgcolor="#000000" allowScriptAccess="sameDomain" wmode="transparent" allowFullScreen="false" style="width: 498px; height: 342px" />

(Thanks in advance for advices)

Posted: Mon, 2010-08-16 14:57 Zach

What are you trying to do with the JavaScript?

Posted: Mon, 2011-02-21 14:38 Bruce Campbell

any updates on the ability to go to another page after playing a video?

does this require any modification of the jwplayer

Posted: Thu, 2011-03-17 16:00 Zach

You'll need to read over our documentation.

Check out our support site for instructions on using the API (see http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference).

Specifically, I think you'll be interested in using the events block in your configuration and setting an onComplete event handler that calls window.open.

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company