Dynamically generated multiple players Created Sep 28, 2009

So I wrote out a long reply, complete with an example, and then I reread your post and thought "Oh that's not that they're asking, is it?" So instead I'll just answer from my experience:

$f() is a global function that can be called at any time. All Flowplayer objects on the page are associated to the global $f() (such as with $f().pause() ). So in your dynamically created elements, after they are created just run the script on only that element:

function createWithJquery() {
  var newPlayer = '<a href="somevideo.flv">New Vid</a>';
  $('#players').append(newPlayer);  
  $f(newPlayer , {src: "/swf/flowplayer.commercial-3.1.1.swf"}
}

function createWithPrototype() {
  var newPlayer = '<a href="somevideo.flv">New Vid</a>';
  $('players').insert(newPlayer);  
  $f(newPlayer , {src: "/swf/flowplayer.commercial-3.1.1.swf"}
}

<a onclick="createWithJquery(); return false;">Create new player</a>
<br />
<a onclick="createWithPrototype(); return false;">Create new player</a>

<div id="players">
</div>

I didn't test any of this, haha, but I hope I get the general point across? You obviously don't need to use a JS library, but I didn't feel like trying to recall the document.getElementById()s and innerHTML setting (I think there's a better way than that).

SO I guess I rambled a long time into getting to: just try it! Call the Flowplayer constructor $f() on your newly created element. It should work.

-Jason

Hi Jason,

That's a pretty neat trick. However I think this is pretty much going to add new flash objects to every "a" tag. I am trying to make use of flowplayers functionality where it pretty much moves the same flash object onto the tag you click on. This way you only have one flash object loaded on the page and can also make the currently playing media stop and play the one you just clicked. The way they do it is by having the same class name on all the "a" tags. However I am unable to recreate this on elements I load dynamically. If I add these elements before the page loads it works fine.

Let me know what u think.

Thanks,
Myron

Wow hey I'm an idiot. Guess who needs to read the API, right...

$f() is definitely not some magical function like I thought it was (and I believe you already know this), but instead just references the first Flowplayer object on the page. It can take a selector like $f('*') to retrieve them all. I'm sorry if I misled you with my rambling.

I'll go one step at a time: how are you loading in new anchor tags dynamically? Some AJAX call?