javascript — Идентификатор div плейлиста Jplayer не отображается.

У меня jplayer отлично работает с PHP MYSQLi с отображением звуковых дорожек, но проблема возникает, когда я хочу отобразить текущий воспроизводимый файл поверх проигрывателя с <div id="playlist"></div> но при применении с использованием javascript весь список воспроизведения исчезает, но когда я удаляю код запуска из javascript, появляется список воспроизведения. Вот мой код

Перед воспроизведением текущего элемента — код (показывает плейлист, плеер работает нормально)

<script type="text/javascript">
$(document).ready(function () {
var cssSelector = { jPlayer: "#playlist_1", cssSelectorAncestor: "#playlist_container" };
var playlist = <?php echo $playlist;?>;
var options = { swfPath: "assets/jplayer/jquery.jplayer.swf", supplied: "<?php echo $supplied;?>", smoothPlayBar: true, autoPlay: true, keyEnabled: true, shuffleOnLoop: true, wmode: "window", free: Boolean, };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});
</script>

Плейлист показывает — изображение

При воспроизведении текущего элемента — код (плейлист исчезает)

<script type="text/javascript">
$(document).ready(function () {
var cssSelector = { jPlayer: "#playlist_1", cssSelectorAncestor: "#playlist_container" };
var playlist = <?php echo $playlist;?>;
var options = { swfPath: "assets/jplayer/jquery.jplayer.swf", supplied: "<?php echo $supplied;?>", smoothPlayBar: true, autoPlay: true, keyEnabled: true, shuffleOnLoop: true, wmode: "window", free: Boolean, };
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
});

$("#playlist_1").on($.jPlayer.event.ready, function (event) {
var current = myPlaylist.current;
var playlist = myPlaylist.playlist;
$.each(playlist, function (index, obj) {
if (index == current) {
$("#playing").html("<span class='artist-name'>" + obj.artist + "</span>" + "<br>" + "<span class='track-name'>" + obj.title + "</span>");
}
});
});
</script>

Плейлист исчезает — Изображение

Выходной HTML

<div id="playlist_container" class="jp-audio">
<div id="jplayer"></div>
<div class="jp-content jp-type-playlist">
<div id="playlist_1" class="jp-jplayer"></div>
<div id="playing"></div>
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1"><img class="img-responsive" src="images/player/3.png" alt="Image"></a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1"><img class="img-responsive" src="images/player/5.png" alt="Image"></a></li>
</ul>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar">
<b></b>
</div>
</div>
</div>
<div class="jp-current-time"></div>
</div>
</div>
<div class="jp-playlist">
<ul>
<li>&nbsp;</li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>

Ничего не делаю

1

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]