JPlayer - 使用 Flash 后备的 MP3 播放列表支持答案

【问题标题】：JPlayer - MP3 Playlist support using Flash fallbackJPlayer - 使用 Flash 后备的 MP3 播放列表支持
【发布时间】：2012-12-10 17:41:15
【问题描述】：

我是 JPlayer 新手，不知道如何使用它。我正在尝试创建一个仅使用 MP3 文件的播放器，我知道并非每个浏览器都原生支持 MP3 播放，因此要让播放器正常工作，在某些情况下需要使用 Flash 后备。

目前我可以让播放器与单个 MP3 一起工作，但是当添加多个 MP3 时，只会播放第一首曲目。

这是我当前的脚本

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$("#jquery_jplayer").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", { mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" }, 
      { mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3" });
    },
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    supplied: "mp3",
    volume: 1,
    wmode:"window",
    solution: "html,flash",
    errorAlerts: true,
    warningAlerts: false

});
});//]]>  
</script>
</head>
<body>
<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface all_rounded_corners">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-previous" tabindex="1">Previous</a></li>
          <li><a href="#" class="jp-next" tabindex="1">Next</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>

我可以说我在某个地方出错了，但我不知道在哪里，我希望得到你的帮助。随意修改脚本以使其工作，并可能将我引导到它工作的示例。

感谢您的帮助。

【问题讨论】：

标签： html flash firefox mp3 jplayer

【解决方案1】：

您需要使用 jPlayerPlaylist 而不是 jPlyer，需要执行以下操作

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>

</head>
<body>
<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface all_rounded_corners">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-previous" tabindex="1">Previous</a></li>
          <li><a href="#" class="jp-next" tabindex="1">Next</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>

<script type='text/javascript'>//<![CDATA[ 

var myPlaylist = null;
 $(document).ready(function () {
 myPlaylist = new jPlayerPlaylist(
                        {
                            jPlayer: "#jquery_jplayer_N",
                            cssSelectorAncestor: "#jp_container_N"
                        },
                        [
                            {
                                mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                            }
                        ],
                        {
                            playlistOptions: {
                                enableRemoveControls: true
                            },

                            swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
                            supplied: "mp3",
                            solution: "html,flash"

                        });


 myPlaylist.option("autoPlay", true);

myPlaylist.add({ title: "", artist: "", mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3", poster: "", });
});
</script>

【讨论】：

这是我尝试运行脚本时遇到的错误：jPlayer 2.2.0 : id='jquery_jplayer' : Error！尝试发出媒体播放命令，但未设置媒体 url。使用 setMedia() 设置媒体 URL。背景：玩
查看 jPlayerPlayList 演示.....jplayer.org/latest/demo-02-jPlayerPlaylist