Go
AdSolution LoginGo to AdSolutionDashboard
Not registered? Sign up!

Action when Video Ends

Google Translate
33 posts | return to the JavaScript Interaction forum | get the rss feed for this thread

Apr. 16, 2009peter

Hi!

I want to execute a JS Script when the Video Ends, when the Video was finished.

Did anyone know, how i can do that?

Thx,
Peter

Apr. 16, 2009robin


    <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

Apr. 16, 2009peter

thanks so far, robin. i hope it works. wink

Thx,
Peter

Apr. 21, 2009kenneth

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!

Apr. 28, 2009john

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.

Apr. 28, 2009robin

@john,

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

Apr. 28, 2009john

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.

May. 25, 2009Kaeesh

@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

May. 26, 2009kevin

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.

May. 26, 2009BaP

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
window.location = 'http://www.google.com';
}
};

May. 26, 2009kevin

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>

May. 27, 2009BaP

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.

May. 28, 2009daveb

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

May. 28, 2009BaP

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});
      };

Jun. 23, 2009Fox

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>

Jun. 23, 2009Bap

@Fox,

What are you trying to accomplish?

No mind readers here...

Jun. 23, 2009Fox

@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.

Jun. 23, 2009Bap

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>

Jun. 23, 2009Fox

@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.

Jun. 23, 2009BaP

@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.

Jun. 24, 2009Fox

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.

Jun. 24, 2009lost

You're welcome.

    Good Luck!     wink

Jun. 24, 2009DB

Will the same code work for the WMV player?

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

Jun. 24, 2009lost

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???

Jun. 26, 2009James

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>

Jun. 26, 2009James

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>

Jun. 26, 2009lost

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.

Aug. 24, 2009lost

The filename for the Test Page has been changed.

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

Sep. 06, 2009Lucki

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

Sep. 06, 2009lost

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#msg93968

Sep. 24, 2009Heem

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

Oct. 17, 2009Stephen 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

Oct. 23, 2009Zachary Ozer

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

Add a reaction

You can also return to the category or try this search for related threads.


 

Search the Forums

Go

Forum Categories

  1. AdSolution
  2. Bug Reports
  3. Feature Suggestions
  4. General Chat
  5. JavaScript Interaction
  6. Licensing Questions
  7. Modules
  8. Plugins
  9. Setup Problems
  10. Skins

Support

Support Here are some helpful links to learn more about the JW Player™:

Monetize Your Video

Monetize Your Video Earn money with ads from LongTail's AdSolution. Watch our demos and sign up now!

Why Buy a License?

Why Buy a License? If you don’t buy a commercial license, you cannot use a JW Player™ on (i) a site that has ads; (ii) a corporate site; or a (iii) CMS. Our licenses are very inexpensive, so what are you waiting for? Buy a license today.

Home   |   JW Players   |   AddOns   |   AdSolution   |   Partnerships   |   Support   |   About   |   Site Map   |   Privacy Policy   |   Terms & Conditions Copyright 2009 LongTail Ad Solutions. All rights reserved.