1

複数の 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>

これを実際の動作で簡単に確認できるように、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 ライブラリの間の衝突であると思われます。回避策は、プレーヤーを最初にフラッシュとしてレンダリングし、html5 にフォールバックするようにすることです (コード化したように逆ではなく)。

于 2013-04-24T19:27:43.003 に答える