如何让jquery-ui accordion中的多个jwplayer音频播放器渲染并正常工作？
我正在尝试改进和更新一个有多个jwplayer的页面的外观(仅限音频)。“原始”页面运行良好-所有音频播放器都能正确渲染并可用(参见http://www.pera.state.nm.us/meetingaudio.html)。
但是我尝试将音频播放器放在jquery-ui accordion中，但并不是所有的都是正确的；accordion div中的第一个播放器被渲染并正常工作，但是同一个accordion 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: 6.3242的最新版本(截止到2013年4月8日)。
有谁可以帮我？
更新:正如伊桑指出的那样，所有的播放器在火狐v.20中都运行得很好。但在Chrome (v.26)、IE (v.10)和Safari (Mac)中它们都被打破了。这是一张图片，显示了我在所有非Firefox浏览器中看到的在手风琴中第一个播放器之后的所有播放器中的内容：
“播放”按钮似乎隐藏在进度条后面，并且无法单击。
回答 1
Stack Overflow用户
发布于 2013-04-25 03:27:43
问题似乎最终是jQuery/jQuery-ui库和jwplayer库之间的冲突。解决办法是让播放器首先呈现为flash，然后回退到html5 (而不是我编写的代码中的相反方式)。
https://stackoverflow.com/questions/15887972
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号