Изменение плеера html5 на uppod js

<div id="myplayer">
<div id="play_box">
<div class="play_left" style="width:15%;  margin-left:21px;">
    <div class="play1" id="ui-icon-play"><img src="/images/play.png"/></div>
    <div class="play1" id="ui-icon-pause" style="display:none"><img src="/images/pause.png"/></div>
</div>
<div id="play_progress" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
    <div id="play_trackname"></div>    
    <div id="jp_container_1" ><div id="play_duration" class="jp-current-time"></div></div>
    
<a style="left: 0%; " class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>

</div>

<div class="play_left"></div>
<div id="play_volume" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
<a style="left: 0%; " class="ui-slider-handle ui-state-default ui-corner-all" href="#"></a>
</div>
<div style="float: right; padding-bottom:15px;" class="play1"></div>
</div>
</div>

<div class="dd" style="width:34px; height: 23px; cursor:pointer; padding-bottom: 2px;" onclick="gopl(this)" id="plid_{$idhash}">
    <span class="ui-icon ui-icon-play"  id="ui-icon-play">&nbsp;</span>
    <span class="ui-icon ui-icon-pause" id="ui-icon-pause" style="display:none">&nbsp;</span>
    <span style="display:none;" id="norber">http://{$serv}/audio/{$val->aid}/{$val->owner_id}/play.mp3</span>
    <span style="display:none;" id="xftitle">{$val->artist} - {$val->title}</span>
</div>