Question

I’m trying to do the following:

Load a page without the player. When the user clicks certain element (ie a link), then the player should load in the predetermined div.

This is the code I have so far without much luck:

<div class="player-audio">
    <div id='mediaplayer2'></div>

    <a href="#" id="btn_audios">view audios player</a>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#btn_audios").click(function() {
        jwplayer('mediaplayer2').setup({
            'flashplayer': 'jwplayer/player.swf',
            'id': 'playerID2',
            'width': '400',
            'height': '240',
            'playlistfile': 'audios.xml',
            'playlist.position': 'bottom',
            'playlist.size': '216',
            'controlbar': 'top',
            'skin': 'jwplayer/skins/yellow-player/yellow-player.zip'
          });
    });
});
</script>

The idea would be that when the user clicks on “view audios player” link, the player loads into the “mediaplayer2” div. This same code works perfectly if I load the player the usual way (when the page loads).

Is it possible what I’m trying?

Answer 1

You’re pretty close. The only thing you need to add after the setup function is:

jwplayer('mediaplayer2').load();

So that makes:

<script type="text/javascript">
$(document).ready(function() {
    $("#btn_audios").click(function() {
        jwplayer('mediaplayer2').setup({
            'flashplayer': 'jwplayer/player.swf',
            'id': 'playerID2',
            'width': '400',
            'height': '240',
            'playlistfile': 'audios.xml',
            'playlist.position': 'bottom',
            'playlist.size': '216',
            'controlbar': 'top',
            'skin': 'jwplayer/skins/yellow-player/yellow-player.zip'
          });
          jwplayer('mediaplayer2').load();
    });
});
</script>