Question

我的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>

Playlist shows - Image

使用当前项目播放 - 代码（播放列表消失）

<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>

Playlist disappears - Image

输出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>

任何事情都没有

Jplayer播放列表div ID未显示 - 播放列表无效

0 个答案: