Autoplay no jPlayer
Bom dia pessoal,
estou voltando a desenvolver sites, e desatualizado, muito, mas principalmente com Jquery, bootstrap, enfim, quase tudo depois de 2015, estou com um site de cliente que pediu um Player de músicas MP3, implantei o JPlayer ( http://jplayer.org ) e funciona, porém se nenhuma forma estou conseguindo o mesmo executar o "autoPlay" na playlist...
segue o link do player (http://www.gessohouse.com.br/v2018/player.php)
segue abaixo o código do arquivo player.php com URL completa de todos os arquivos requeridos(CSS, JS e MP3)
<link href="http://www.gessohouse.com.br/v2018/js/jPlayer/estilo_tema4.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jquery.js"></script>
<script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jplayer.playlist.min.js"></script>
<script type="text/javascript" src="http://www.gessohouse.com.br/v2018/js/jPlayer/jquery.jplayer.inspector.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var myPlaylist = new jPlayerPlaylist({
jPlayer: "#PlayerHtml5",
cssSelectorAncestor: "#jp_container_N"
}, [
{ title:'Gesso House - Design & Elegância (Faixa 01)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_8_0_30082018083521.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 02)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_10_0_30082018084115.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 03)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_12_0_30082018085004.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 04)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_14_0_30082018092756.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 05)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_15_0_03092018103923.mp3', oga:'', poster:'' },{ title:'Gesso House - Design & Elegância (Faixa 06)', artist:'', mp3:'http://www.gessohouse.com.br/v2018/images/musicas/MUSICAS_16_0_03092018104018.mp3', oga:'', poster:'' },
], {
playlistOptions: {
enableRemoveControls: false,
loopOnPrevious: false,
shuffleOnLoop: false,
autoPlay: true
},
swfPath: "js/jPlayer/",
supplied: "mp3",
wmode: "window",
volume: .99,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: true
});
// The remove commands
$("#playlist-remove").click(function() {
myPlaylist.remove();
});
// The shuffle commands
$("#playlist-shuffle").click(function() {
myPlaylist.shuffle();
});
$("#playlist-shuffle-false").click(function() {
myPlaylist.shuffle(false);
});
$("#playlist-shuffle-true").click(function() {
myPlaylist.shuffle(true);
});
// The next/previous commands
$("#playlist-next").click(function() {
myPlaylist.next();
});
$("#playlist-previous").click(function() {
myPlaylist.previous();
});
// The play commands
$("#playlist-play").click(function() {
myPlaylist.play();
});
// The pause command
$("#playlist-pause").click(function() {
myPlaylist.pause();
});
//$("#jplayer_inspector_1").jPlayerInspector({jPlayer:$("#PlayerHtml5")});
/* added Dustin Blake code 01-11-2013 */
$("#PlayerHtml5").bind($.jPlayer.event.play, function (event) {
var current = myPlaylist.current,
playlist = myPlaylist.playlist;
$.each(playlist, function (index, obj) {
if (index == current) {
$('.NomeDaMusica').text(obj.title);
}
});
});
});
</script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td>
<div id="jp_container_N" class="jp-video jp-video-270p">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<table width="460" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td>
<div class="jp-type-playlist">
<div id="PlayerHtml5" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
</div>
<div class="jp-interface">
<div id="NomeDaMusica" class="NomeDaMusica"></div>
<div class="jp-divisor">/</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous" tabindex="1" title="Voltar Música">voltar</a></li>
<li><a href="javascript:;" class="jp-play" tabindex="1" title="Play" id="BotaoPlay">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1" title="Pausar">pause</a></li>
<li><a href="javascript:;" class="jp-next" tabindex="1" title="Avançar Música">proxima</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1" title="Parar">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="Mudo">mudo</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="Desativar Mudo">mudo off</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="Volume Máximo">volume maximo</a></li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="Repetir">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="Desligar Repetir">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div class="jp-playlist">
<ul>
<li></li>
</ul>
</div>
</div>
</td></tr></table>
</div>
</td></tr></table>Discussão (3)
Carregando comentários...