Question

我在商店主页上的产品列表上创建了jPlayer的多个实例。

在product-list.tpl文件中，我已将iframe附加到foreach循环中，该循环根据产品名称从自定义目录加载jPlayer轨道。

jPlayer的每个实例都有各自的ID：＃jquery_jplayer_1，＃jquery_jplayer_2等。除从同一台jPlayer播放同一文件外，其他所有东西都工作正常。播放某首曲目时，然后单击另一个播放器，将同时播放两首歌曲。
我尝试了几种解决方案来解决此问题，但似乎没有任何效果。

有一个脚本可以在其中创建每个jPlayer实例：

<script type="text/javascript">
      var querystring = window.location.search,
match = querystring.match(/playerNumber=(.*)?&*/),
playerNumber = match[1];

new jPlayerPlaylist({
jPlayer: "#jquery_jplayer_"+playerNumber,
cssSelectorAncestor: "#jp_container_"+playerNumber
}, [
{foreach $songs as $name => $path}
{
    title: "{$path.name}",
    mp3: "https://{$host}{$baseUrl}/utwor/{$path.path}"
},
{/foreach}
], {
play: function() { // doesn't work at all 
     $(this).jPlayer("pauseOthers");
},
swfPath: "{$baseUrl}/static/",
supplied: "mp3",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true
});
</script>

我使用Smarty从服务器加载歌曲。

每次调用iframe舞会产品列表.tpl时都会加载html代码：

{literal}
<script type="text/javascript">
var querystring = window.location.search,
    match = querystring.match(/playerNumber=(.*)?&*/),
    playerNumber = match[1];


</script>
{/literal}

<div id="jquery_jplayer" class="jp-jplayer"></div>
<meta charset="utf-8">

<div id="jp_container" class="jp-audio" role="application" aria-label="media player">

    <div class="jp-type-playlist">
        <div class="jp-gui jp-interface">
            <div class="jp-volume-controls">
                <button class="jp-mute" role="button" tabindex="0">mute</button>
                <button class="jp-volume-max" role="button" tabindex="0">max volume</button>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
            </div>
            <div class="jp-controls-holder">
                <div class="jp-controls">
                    <button class="jp-previous" role="button" tabindex="0">previous</button>
                    <button class="jp-play" role="button" tabindex="0">play</button>
                    <button class="jp-stop" role="button" tabindex="0">stop</button>
                    <button class="jp-next" role="button" tabindex="0">next</button>
                </div>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
                <div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
                <div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
                <div class="jp-toggles">
                    <button class="jp-repeat" role="button" tabindex="0">repeat</button>
                    <button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
                </div>
            </div>
            {literal}
            <script>
               document.getElementById("jquery_jplayer").setAttribute('id','jquery_jplayer_'+playerNumber);
               document.getElementById("jp_container").setAttribute('id','jp_container_'+playerNumber);
            </script>    
            {/literal}
        </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>
</div>

有人可以帮忙吗？

screenshot of jPlayer instances at index page

jPlayer多实例问题

0 个答案: