<div class="jplayer" id="jquery_jplayer_{{ player.id }}"></div>

<div id="player_container_{{ player.id }}" class="cmsplayer"> 
	<ul id="player_controls_{{ player.id }}" class="controls"> 
		<li id="player_play_{{ player.id }}" class="play">play</li> 
		<li id="player_pause_{{ player.id }}" class="pause">pause</li> 
		<li id="player_stop_{{ player.id }}" class="stop">stop</li> 
		<li id="player_volume_min_{{ player.id }}" class="volume-min">min volume</li> 
		<li id="player_volume_max_{{ player.id }}" class="volume-max">max volume</li> 
		<li id="ctrl_prev_{{ player.id }}" class="prev">previous</li> 
		<li id="ctrl_next_{{ player.id }}" class="next">next</li> 
	</ul> 
	<div id="play_time_{{ player.id }}" class="playtime"></div> 
	<div id="total_time_{{ player.id }}" class="totaltime"></div> 
	<div id="player_progress_{{ player.id }}" class="progress"> 
		<div id="player_progress_load_bar_{{ player.id }}" class="loadbar"> 
			<div id="player_progress_play_bar_{{ player.id }}" class="playbar"></div> 
		</div> 
	</div> 
	<div id="player_volume_bar_{{ player.id }}" class="volumebar"> 
		<div id="player_volume_bar_value_{{ player.id }}" class="volumebarvalue"></div> 
	</div> 
</div> 
 
<div id="playlist_list_{{ player.id }}" class="cmsplaylist"> 
	<ul>
	</ul> 
</div> 
<script type="text/javascript">
$(document).ready(function(){
    $("head").append('<scr' + 'ipt type="text/javascript" src="{{ MEDIA_URL }}jplayer/js/cmsplayer.js"></scr' + 'ipt>');
    var player = $('#jquery_jplayer_{{ player.id }}');
	player.jPlayer(
	    {
		    ready:function(){
	                cmsplayer_ready(
	                player, 
				   {{ player.get_json_playlist }},
				   {{ player.get_json_autoplay }},
				   "{{ player.id }}"
				 );
			},
			cssPrefix: 'jqjp_{{ player.id }}',
			swfPath: 'http://' + window.location.host + {{ player.get_base_path }},
			oggSupport: {{ player.get_json_ogg_support }},
			customCssIds: true
		}
	);
});
</script>