Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

No id in listener callbacks

25 replies [Last post]

Hello,

I am getting null player id in the listener callback objects. Other attributes are set correctly. I do get the id in the playerReady() function, so this is not the same problem as already discussed here.

Sample player initialization:

function playerReady(obj) {
var player = document.getElementById(obj.id);
if (player) {
player.addControllerListener("VOLUME", "on_volume");
player.addModelListener("STATE", "on_state");
player.addModelListener("TIME", "on_time");
}
}

The argument I am getting in on_volume:
{id: null,
client: "FLASH LNX 9,0,115,0",
version: "4.2.95",
percentage: 53}

on_state and on_time have the same problem. The id is null and other attributes are ok.

Using swfobject 2.1 for embedding (according to the wiki). Testing in Firefox 3.0.3/Linux.

Thanks for any hints.

Today I also tried with Flash 10,0,12,36 with the same result. No joy with JW Player 4.2.90 as well.

The embedding code looks like:

      var vars = {id: id};
      var params = {allowfullscreen: "false",
    allowscriptaccess: "always"};
      var attrs = {};
      swfobject.embedSWF(uri, id, width, height, MIN_FLASH_VERSION, false, vars, params, attrs);

I also tried setting the id in attrs without any success.

Am I missing something or is it a known problem?

Besr regards, Tomas

var player = 'player';
var id = 'something';
var vars = {};
var params = {allowfullscreen:'false', allowscriptaccess:'always'};
var attrs = {id:id, name:id};
swfobject.embedSWF(uri, player, width, height, MIN_FLASH_VERSION, false, vars, params, attrs);

container element:

<div id="container">
  <a id="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a>
</div>

Thank you for your answer. I can see three differences between this code and mine.

1) vars doesn't define id. If I omit it, I don't get id in the playerReady() callback (on Linux). This was already reported on this list, so I guess this is a known problem.
2) The id of the HTML emement (replaced by swfobject) id not the same as the player id.
3) The attrs define the id and name. That's what I have tried already as I mentioned in my second post.

Anyway, even if I apply all these changes it doesn't solve my problem.

Now I got to testing it on Windows and it works fine, so the problem is probably specific to Linux. I definitely need to support Linux users, so I am still looking for a way to solve that. From this behavior, I'd guess that the problem is not in my code, but either in the Flash plugin or JW Media Player. Do you think it is possible to fix it or work around it some way?

Many thanks for any feedback.

Best regard, Tomas

The id of the HTML element that is replaced by the object code generated by swfobject should not be the same as the player id/name. This will avoid conflicts with more complex JavaScript code. Also, it is necessary to use both the id and the name to have fully cross-browser compliant code.

As I recall from other posts, there was a problem with the player not returning the id in the player reference object on Linux. I believe that this was fixed in recent versions of the player. Have you tested with v4.3.125?

Unless you have multiple players on one page, it is not necessary to ever get the id from the player. You only need to get the player reference object, which you can get by directly referencing the player's id. Just don't try to get the reference object until the player is fully instantiated.

    <script type="text/javascript">
      var player = null;

      // include in functions as needed
      player = document.getElementById('something');
    </script>

I have a problem, being somewhat similar I guess: I'm using the same config (swfobject 2.1, jw player 4.2).

My problem is that the playerReady function is never called, resulting in the <player> object is never defined.
So, when this object is referenced (here in the <select> statement), I get an error like "player is empty or not an object". It drives me nuts...

What am I doing wrong here?

Code is (how do I "box" this btw?):

------
<HTML lang="nl">
<head>
<title>"Our Video's"</title>
<style type="text/css">
#wrapper { position:relative; left:20px; top:60px; width:600; height:300; }
</style>
<script
type="text/javascript" src="swfobject2_1.js">
</script>
<script type="text/javascript">
var player = null;
function playerReady(thePlayer) {
alert('the videoplayer '+thePlayer.id+' has been instantiated');
player = document.getElementById(thePlayer.id);
printPlaylistData(thePlayer)
}
function createPlayer(thePlayer, theFile) {
var flashvars = {
file:theFile,
autostart:"false",
logo:"logo-vvs.jpg",
playlistsize:"200",
playlist:"right",
resize:"true"
}
var params = {
allowfullscreen:"true",
allowscriptaccess:"always"
}
var attributes = {
id:thePlayer,
name:thePlayer
}
swfobject.embedSWF("player.swf", "placeholder1", "620", "300", "9.0.115", false, flashvars, params, attributes)
}
</script>
</head>
<body
onload="createPlayer('deSpeler', 'DBM-Video_bestanden/Playlists/2008-Sweelinckhof.xml');">
<tbody>
<tr>
<td>
<select name="deSpeler" onchange="javascript:player.sendEvent('STOP'); player.sendEvent('LOAD', this.value);" style="width:320px">
<option value="DBM-Video_bestanden/Playlists/2008-Sweelinckhof.xml">Sweelinckhof 2008 film</option>
<option value="DBM-Video_bestanden/Playlists/2007-Paradiso.xml">Paradiso 2007 clips</option>
</select>
<div id="wrapper" >
<div id="placeholder1"> Get
<a href="http://www.adobe.com/go/getflashplayer">Adobe Flash</a> to enjoy this...
</div>
</div>
</td>
</tr>
</tbody>
</body>
</html>

------

Having an invalid (non-existant) function call in the playerReady() function, makes the entire function invalid.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="nl">

  <head>

    <title>"Our Video's"</title>

    <style type="text/css">
      #wrapper
      {
        position:              relative;
        left:                      20px;
        top:                       60px;
        width:                    600px;
        height:                   300px;
      }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>
    <!-- <script type="text/javascript" src="swfobject2_1.js"></script> -->

    <script type="text/javascript">
      var player = null;

      function playerReady(thePlayer)
      {
        alert('the videoplayer ' + thePlayer.id + ' has been instantiated');
        player = document.getElementById(thePlayer.id);
      //printPlaylistData(thePlayer)
      };

      var flashvars =
      {
        file:                           'DBM-Video_bestanden/Playlists/2008-Sweelinckhof.xml', 
        logo:                           'logo-vvs.jpg',
        playlist:                       'right',
        playlistsize:                   '200',
        autostart:                      'false'
      };

      var params =
      {
        allowfullscreen:                'true', 
        allowscriptaccess:              'always'
      };

      var attributes =
      {
        id:                             'deSpeler', 
        name:                           'deSpeler'
      };

      swfobject.embedSWF('player.swf', 'placeholder1', '620', '300', '9.0.124', false, flashvars, params, attributes);
    </script>

  </head>

  <body>

    <tbody>
      <tr>
        <td>
          <select name="deSpeler" onchange="javascript:player.sendEvent('STOP'); player.sendEvent('LOAD', this.value);" style="width:320px"> 
            <option value="DBM-Video_bestanden/Playlists/2008-Sweelinckhof.xml">Sweelinckhof 2008 film</option>
            <option value="DBM-Video_bestanden/Playlists/2007-Paradiso.xml">Paradiso 2007 clips</option>
          </select>
          <div id="wrapper" > 
            <div id="placeholder1">
              Get
              <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash</a> to enjoy this...
            </div>
          </div>
        </td>
      </tr>
    </tbody>

  </body>

</html>

Oops, thanks, forgot to remove that from the listing. Was one of my desperate trials... I just removed it, but playerReady() still is not called (I still don't get the alert).
Remember: I use swfobject 2.1 - read somewhere that playerReady() would be unnecessary to call with 2.x.
If that is the case, how do I get the player object defined. If that's not true and just a rumour, same question...!

Doesn't really matter which version of swfobject you are using. v2.2 (Beta) is the best, but the others work.

You've never HAD to use playerReady(). The alternative is to run a loop, trying to get the player reference object, until you are successful. The player calls playerReady() once, when it is ready, so you don't have to run a loop.

If you don't do anything requiring the player reference object until the player is instantiated, then you could just get the player reference object when and where needed. It should certainly be available once the player is playing.

There was a problem with some earlier versions on Linux. Have you upgraded to v4.3.125 (don't use v4.3.130) from here:

      http://developer.longtailvideo.com/trac/log/trunk/as3/player.swf?rev=125

I got a bit suspicious about swfobject 2.x after finding out that the current jw player 4.2 download still has swfobject 5.1 packaged, and scanning the release notes observing "@31 [31] [6 months] [jeroen] reverted examples to 1.5 swfobject", although that was some time ago and probably not related to 2.x. Nevertheless, It's confusing that swfobject 5.1 rather than 2.1 is still shipped with the latest download? On the other hand, some examples *must* use 2.1 or could never work.
But OK well. The findings in my case are: the player runs fine with this code and the first playlist is shown; playerReady() should have been called but appearently is not. Why? When performing the <select>, this fails on the player.sendEvent command with an error "[line#:] player is empty or is not an object".
I guess that when we found why playerReady() isn't executed after the player started (and it does, no messages and errors), this might point me to a solution.

ehh.. I mean sfwobject 1.5 of course, ot 5.1 ;)

Oh, and BTW, if it's of any help, this site is being developed on XP IIS (since it's serviced on this type of platform by the ISP) and tested with an IE6 client.

You shouldn't be having any problems on Windows.

Here's the code I posted above running on Apache/Windows/swfobject v2.2:http://willswonders.myip.org:8085/php/DickH.htmlOf course, it's my player v4.3.125 and my playlist.

Here's the same code running on LightTPD/Windows/swfobject v2.1 from Google:http://willswonders.myip.org:8081/DickH.html
Both work.

Maybe it bears mentioning that you have to be testing online (from http://www.somedomain.com/path/page.html) because the JavaScript API only works online. http://localhost is OK. Adobe Flash Player security restrictions...

Hello kLink,

Thank you very much for your help. The version 4.2.125 solved the problem (passing player id in listener callback arguments). I need to support multiple players, so I'll need to use this version. Is thre any estimation when this version might be released?

Thank you once again. Tomas

It's available for testing right now from:

      http://developer.longtailvideo.com/trac/log/trunk/as3/player.swf?rev=125

As far as an official release, I don't know that will be.

Mmm I run it all on one local host, so I still don't understand why I don't seem to get the playerReady running here. But OK, I'll dive into this again.

And, it *Almost* works on both swfobjects: They both break to error when the player object is referenced in the <select> (javascript:player.sendEvent('STOP'); etc) with "This property or method is not supported by this object".

Ah, on second look that's almost certainly caused by the unknown XML paths... oops again, too rushie here...

 
@Dickh,

If you post your current code, I'll take another look at it.

The code box is the "<>" below the text-entry box.

And just to be really clear; you are accessing this locally from a server with http://localhost/somepage.html ???

Code is unchanged, and included unchanged as it is on my machine in the codebox below... Pls change the paths to reflect your situation.

Indeed the online testing thing likely should do the trick (what's left?).

Now we're getting quite shameful basic here (wish I had some Unix box to test on right now, where the whole URL syntax was designed for) since how to compose a URL on a windows box? some hassle from driveletter and slashes and backslashes? Wouldn't know...

I am developping this in a quite simple HTML editor (Handy HTML), works fine for me until now (?) I can edit HTML/PHP/Java/Javascript etc. *files* with it, (not URL's) and it instantly tests what you're editing every few seconds. In my case that's quite useful ;)

To test "locally" I understand I open a seperate IE window and compose an URL in it to the webpage I'm editing and refresh to reload and test. A hint please, how to compose a windows URL on the localhost?

Ok, here's the code again (BTW thanks a lot for your support so far!):

<HTML lang="nl">
<head>
<title>"Our Video's"</title>
    <style
   type="text/css">
       #wrapper { position:relative; left:20px; top:60px; width:600; height:300; }
</style>
<script
type="text/javascript" src="swfobject2_1.js">
</script>
<script type="text/javascript">
var player = null;
function playerReady(thePlayer) {
alert('the videoplayer '+thePlayer.id+' has been instantiated');
player = document.getElementById(thePlayer.id);
}
function createPlayer(thePlayer, theFile) {
        var flashvars = {
            file:theFile,
            autostart:"false",
            logo:"logo-vvs.jpg",
            playlistsize:"200",
            playlist:"right",
            resize:"true"
        }
        var params = {
            allowfullscreen:"true",
            allowscriptaccess:"always"
        }
        var attributes = {
            id:thePlayer, 
            name:thePlayer
        }
        swfobject.embedSWF("player.swf", "placeholder1", "620", "300", "9.0.115", false, flashvars, params, attributes)
        }
    </script>
</head>
<body
onload="createPlayer('deSpeler', 'DBM-Video_bestanden/Playlists/2008-Sweelinckhof.xml');">
    <tbody>
          <tr>
             <td>
             <select name="deSpeler" onchange="javascript:player.sendEvent('STOP'); player.sendEvent('LOAD', this.value);" style="width:320px">
<option value="DBM-Video_bestanden/Playlists/2008-Sweelinckhof.xml">Sweelinckhof 2008 film</option>
<option value="DBM-Video_bestanden/Playlists/2007-Paradiso.xml">Paradiso 2007 clips</option>
</select>
<div id="wrapper" >      
    <div id="placeholder1"> Get
<a href="http://www.adobe.com/go/getflashplayer">Adobe Flash</a> to enjoy this...
    </div>
</div>
     </td>
          </tr>
</tbody>
</body>
</html>

mmm, nice box, bad layout. HandyHTML uses tabs and spaces to relayout the source (including all sorts of colors and things, a real joy to watch ;). This codebox obviously expects other layout directives... Well can't do much about that now unfortunately. Good luck in digging through this mud ;)

The JavaScript API doesn't function offline. You have to be serving the page from a real web server with http://... NOT file:///C:/...

The Adobe Flash Player imposes quite a few security restrictions and this is one of them.

The web server can be running on your local box, that's what many of us do for fast development, but it must be an http server NOT a file server.

The code from your most recent post works fine for me.

I understand what you're saying. I have just uploaded to the ISP and it works indeed (http://www.deblijemeiden.nl/DBM-Video's.htm - I am the guy on the piano)! Thanks a million!. I found a hook in HandyHTML to listen to a localhost rather than displaying a local file. Just will try to setup IIS for future development. Ah, learning every day ;) Thanks again!

@Dickh,

You're welcome. Good Luck! (Tinkle those ivories like Jerry Lee Lewis!!!)

                                                                                      :D

p.s. If you're on a windows box, consider using LightTPD from here: http://en.wlmp-project.net/downloads.php for your development server. It supports mod_flv_streaming now and mod_h264_streaming soon. It's pretty much PlugNPlay. If you need a config file, I'd be happy to share mine.

Haha, well I do that now and then, I would say Stay tuned! :)
Just managed to setup IIS. This integrates beautifully with my smashy HandyHTML toolkit: while developing, I can see my changes immediately in a subscreen of the editor refreshed. The Javascript API works locally as well now. All my sorrows are gone...it's a beautiful day...
Thanks for the offer - but for now I'm umbrella'd ;)

@Dickh,

Good Luck and Good Playing (or whatever it's called).

                                                                                            :D

This problem was eating at me most of this morning and I finally fixed it. I had to set the flashvar 'id' before my linux browser would properly catch the playerid when playerReady was run.

Even with that change, I still needed the attribute 'id' also set to the same value before the listener I had would execute properly. My final code looked something like this:

<div id="playerdiv30">The version of flash needed to play this video is not installed. </br> You can get it <a href="http://www.adobe.com/go/getflashplayer" target="_blank">here</a>.  If you have the newest version, then you might not have javascript enabled.</div>

<script type="text/javascript" src="/flash/playback/js/swfobject.js"></script>
<script type="text/javascript" src="/flash/playback/js/simpleajax.js"></script>

<script type="text/javascript">
var player = null;
var step = 0;
var played = 0;
var start = 0;

function playerReady(thePlayer) {
player = document.getElementById(thePlayer.id);
addListeners();
}

function addListeners() {
if (player) {
player.addModelListener("TIME", "positionListener");
} else {
setTimeout("addListeners()",100);
}
}

function positionListener(obj) {
currentPosition = obj.position;
if (step == 0){
if (played+start >= currentPosition-2 && played+start <= currentPosition+2){
played = currentPosition-start;
}else{
start = currentPosition;
played = 0;
}
if (played >= 30){
replaceInnerHTML('ratevid30','/ratevid.php');
step = 1;
}
}
}

var flashvars =
{
file: '/flash/playback/playlist.php?vid_id=30',
controlbar: 'bottom',
autostart: 'true',
repeat: 'list',
id: 'player30'
};

var params =
{
allowfullscreen: 'true',
allowscriptaccess: 'always'
};

var attributes =
{
id: 'player30',
name: 'player30'
};

swfobject.embedSWF('/flash/playback/player.swf?hash=688173ed4dfa63714a34981b6365bacc', 'playerdiv30', '547', '430', '9.0.124', false, flashvars, params, attributes);
</script>
<div id="ratevid30"></div>

Note: The above example (using a listener to rate a video after 30 seconds of continuous playback) doesn't work with multiple players. I'm not sure how to have listeners for multiple videos on the same page...