Question

我正在尝试改进和更新具有多个jwplayers（仅限音频）的页面的外观。 “原始”页面工作正常 - 所有音频播放器都能正确呈现并且可以使用（参见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）动作中轻松看到这个，我把jsFiddle放在一起：http://jsfiddle.net/timbck2/y4RSS/。

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

任何人都可以帮助我吗？

更新：正如Ethan指出的那样，玩家在Firefox v.20中都能正常运行。但它们在Chrome（第26版），IE（第10版）和Safari（Mac）中被打破。这是一张图片，显示我在所有非Firefox浏览器中看到的所有玩家在手风琴中的第一个之后：

broken jwplayer 播放按钮似乎隐藏在进度条后面，无法点击。

Answer 1

问题似乎最终是jQuery / jQuery-ui库和jwplayer库之间的冲突。解决方法是让玩家首先渲染为flash并回退到html5（而不是反过来，因为我已编码）。

如何在jquery-ui手风琴渲染中制作多个jwplayer音频播放器并正常工作？

1 个答案: