jusuf
Бывший модератор
- Регистрация
- 3 Апр 2006
- Сообщения
- 329
- Реакции
- 206
- Автор темы
- #1
Ест один темплате в нем встроен jplayer плейлисты создаются через javascript вот так
Как сделать чтобы плейлист брался из html?
Код:
$(document).ready(function(){
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#jplayer_N",
cssSelectorAncestor: "#jp_container_N"
}, [
{
title:"Busted Chump",
artist:"ADG3",
mp3:"http://flatfull.com/themes/assets/musics/adg3com_bustedchump.mp3",
poster: "images/m0.jpg"
},
{
title:"Busted Chump",
artist:"ADG3",
mp3:"http://flatfull.com/themes/assets/musics/adg3com_bustedchump.mp3",
poster: "images/m0.jpg"
}
], {
playlistOptions: {
enableRemoveControls: true,
autoPlay: true
},
swfPath: "js/jPlayer",
supplied: "webmv, ogv, m4v, oga, mp3",
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false
});
$(document).on($.jPlayer.event.pause, myPlaylist.cssSelector.jPlayer, function(){
$('.musicbar').removeClass('animate');
$('.jp-play-me').removeClass('active');
$('.jp-play-me').parent('li').removeClass('active');
});
$(document).on($.jPlayer.event.play, myPlaylist.cssSelector.jPlayer, function(){
$('.musicbar').addClass('animate');
});
$(document).on('click', '.jp-play-me', function(e){
e && e.preventDefault();
var $this = $(e.target);
if (!$this.is('a')) $this = $this.closest('a');
$('.jp-play-me').not($this).removeClass('active');
$('.jp-play-me').parent('li').not($this.parent('li')).removeClass('active');
$this.toggleClass('active');
$this.parent('li').toggleClass('active');
if( !$this.hasClass('active') ){
myPlaylist.pause();
}else{
var i = Math.floor(Math.random() * (1 + 7 - 1));
myPlaylist.play(i);
}
});
Как сделать чтобы плейлист брался из html?
Код:
<ul class="list-group list-group-lg no-radius no-border no-bg m-t-n-xxs m-b-none auto">
<li class="list-group-item">
<div class="pull-right m-l">
<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
<a href="#" class="m-r-sm"><i class="icon-plus"></i></a>
<a href="#"><i class="icon-close"></i></a>
</div>
<a href="#" class="jp-play-me m-r-sm pull-left">
<i class="icon-control-play text"></i>
<i class="icon-control-pause text-active"></i>
</a>
<div class="clear text-ellipsis">
<span>E.T.M</span>
<span class="text-muted"> -- 04:35</span>
</div>
</li>
<li class="list-group-item">
<div class="pull-right m-l">
<a href="#" class="m-r-sm"><i class="icon-cloud-download"></i></a>
<a href="#"><i class="icon-plus"></i></a>
</div>
<a href="#" class="jp-play-me m-r-sm pull-left">
<i class="icon-control-play text"></i>
<i class="icon-control-pause text-active"></i>
</a>
<div class="clear text-ellipsis">
<span>Vestibulum id ligula porta</span>
<span class="text-muted"> -- 04:15</span>
</div>
</li>
</ul>