1

我正在尝试改进和更新具有多个 jwplayer（仅限音频）的页面的外观。“原始”页面工作正常 - 所有音频播放器都正确呈现并且可用（请参阅http://www.pera.state.nm.us/meetingaudio.html）。

但我试图将音频播放器放在 jquery-ui 手风琴中，但一切都不对；手风琴 div 中的第一个玩家被渲染并正常工作，但同一手风琴 div 中的所有后续玩家都被错误地渲染并且不会播放。播放按钮似乎呈现在进度条下方。这是一些说明问题的示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <script type="text/javascript" src="/resources/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="/resources/jquery-ui-1.10.2.min.js"></script>
  <script type="text/javascript" src="/resources/jwplayer6/jwplayer.js"></script>
  <link rel="stylesheet" type="text/css" href="/resources/pera-custom/jquery-ui-1.10.2.custom.min.css" />

  <script type="text/javascript">
    $(function() {
      $(".accordion").accordion({
        heightStyle: "content"
      });
    });
  </script>
</head>
<body>
  <div class="accordion">
    <span class="accHead">February 28, 2013</span>
    <div class="accContent">
      <div id="Board20130228" class="audioPlayer" style="float: left;"></div>
      <div style="float: right;"><span class="smallNote">Length:<br />1:29:55</span></div>
    </div>

    <span class="accHead">January 31, 2013</span>
    <div class="accContent">
      <div class="audioPlayer" id="Board20130131" style="float: left;"></div>
      <div style="float: right;"><span class="smallNote">Length:<br />1:49:53</span></div>
    </div>
  </div>

  <script type="text/javascript">
    jwplayer('Board20130228').setup({
      'file': 'http://www.pera.state.nm.us/audio/BoardMeetingFeb28_2013.mp3',
      'controlbar': 'bottom',
      'width': '420',
      'height': '40',
      'provider': 'audio',
      'primary': 'html5'
    });

    jwplayer('Board20130131').setup({
      'file': 'http://www.pera.state.nm.us/audio/BoardMeetingJan31_2013.mp3',
      'controlbar': 'bottom',
      'width': '420',
      'height': '40',
      'provider': 'audio',
      'primary': 'html5'
    });
  </script>
</body>
</html>

所以你可以很容易地在（in）action 中看到这一点，我整理了一个 jsFiddle：http: //jsfiddle.net/timbck2/y4RSS/。

我正在使用 jwplayer 的最新版本（截至今天，2013 年 4 月 8 日）：6.3242。

谁能帮我？

更新：正如 Ethan 指出的，播放器在 Firefox v.20 中都可以正常工作。但是它们在 Chrome (v.26)、IE (v.10) 和 Safari (Mac) 中被破坏了。这是一张图片，显示了在手风琴中的第一个之后，我在所有非 Firefox 浏览器中为所有玩家看到的内容：

破碎的jwplayer 播放按钮似乎隐藏在进度条后面，不可点击。

4

1 回答 1

0

问题似乎最终是 jQuery/jQuery-ui 库和 jwplayer 库之间的冲突。解决方法是让播放器首先呈现为 flash 并回退到 html5（而不是相反，因为我已经对其进行了编码）。

于 2013-04-24T19:27:43.003 回答