Controlling JW FLV player with jQuery

Question

I'm trying to control an instance of the JW FLV player player using jquery.

What I want to do is have a series of links which when clicked load an XML playlist into the player.

By following the tutorial here I've gotten things working basically as I want them in terms of functionality, but even I can see that it's ugly as sin, as at the moment my anchors look like this:

<a class="media" href="#"
onclick="player.sendEvent('STOP');
player.sendEvent('LOAD',
'path/to/playlist.xml');
return false;">load playlist</a>

while this gets a ref to the player

var player = null;
function playerReady(obj)
{
  player = gid(obj.id);
};

function gid(name)
{
  return document.getElementById(name);
};

What I'd like to be able to do is have my anchors look like this:

<a class="media" href="#" rel="path/to/playlist.xml">load playlist</a>

And then use jquery to find the anchors with class="media", read the value of the element's rel attribute and then bind a click event to it which triggers an appropriate function. Alas this is beyond my extremely meagre powers.

So far I've got:

$('a.media').click(function()
  {
    playlist = $(this).attr("rel");
    player.sendEvent('LOAD', playlist
  }
);

Which clearly doesn't work. Anyone care to help an idiot/n00b?

I should say that really what I want to do is learn rather than just get some one else to do it, so if you can explain things a bit that would be extra awesome.

Answer 1

What you're doing seems correct to me, although I'm not sure variable "player" is defined there; it depends on the context.

What you can do is something like

$('a.media').click(function () {
  var player = $("#player-id");
  if(player.length == 1){
    player = player[0];
    var playlist = $(this).attr("rel");
    player.sendEvent('LOAD', playlist);
  }
});

Answer 2

player.sendEvent('LOAD', playlist
}
);

Check your bracket nesting.

Otherwise, should work. But ‘rel’ isn't a very good place to put a URL, as it is only supposed to contain known tokens. Why not put it in ‘href’ where you would expect? You just have to ‘return false’ or ‘preventDefault’ to stop the link being followed after a lick.

function playerReady(obj)
{
    player = gid(obj.id);
};
function gid(name)
{
    return document.getElementById(name);
};

Er, isn't gid completely superfluous here? Why not just ‘player= obj’?

Answer 3

I'm get the same problem like you here. And I realize that the first you call create player using

var newplayer = SWFobject(width,height,playerid,version,background-color);
newplayer.addVarible(...);
newplayer.write(htmltaghold place for this player);

I don't remember correctly but its like the code above, after that you can use var player = window.document[thePlayer.id] in the function playerReady(thePlayer){} in jQuery like

jQuery("div#id").click(function(){
   your code
   player.sendEvent("NEXT");
});

player.sendEvent("PLAY"); ..etc. Hope we can talk about that and improve jQuery