title: Controlling JW FLV player with jQuery
body: <p>I'm trying to control an instance of the <a href="http://www.longtailvideo.com/players/jw-flv-player/" rel="nofollow noreferrer">JW FLV player</a> player using jquery.</p>
  
  <p>What I want to do is have a series of links which when clicked load an XML playlist into the player. </p>
  
  <p>By following the tutorial <a href="http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_5-2-3-0.html" rel="nofollow noreferrer">here</a> 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:</p>
  
  <pre><code>&lt;a class="media" href="#"
  onclick="player.sendEvent('STOP');
  player.sendEvent('LOAD',
  'path/to/playlist.xml');
  return false;"&gt;load playlist&lt;/a&gt;
  </code></pre>
  
  <p>while this gets a ref to the player</p>
  
  <pre><code>var player = null;
  function playerReady(obj)
  {
    player = gid(obj.id);
  };
  
  function gid(name)
  {
    return document.getElementById(name);
  };
  </code></pre>
  
  <p>What I'd like to be able to do is have my anchors look like this:</p>
  
  <pre><code>&lt;a class="media" href="#" rel="path/to/playlist.xml"&gt;load playlist&lt;/a&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>So far I've got:</p>
  
  <pre><code>$('a.media').click(function()
    {
      playlist = $(this).attr("rel");
      player.sendEvent('LOAD', playlist
    }
  );
  </code></pre>
  
  <p>Which clearly doesn't work. Anyone care to help an idiot/n00b?</p>
  
  <p>I should say that really what I want to do is <em>learn</em> rather than just get some one else to do it, so if you can explain things a bit that would be extra awesome.</p>