여러 명의 선수 (오디오 전용)가있는 페이지의 모양을 개선하고 업데이트하려고합니다. "원본"페이지는 정상적으로 작동합니다. 모든 오디오 플레이어가 올바르게 렌더링되고 사용할 수 있습니다 (http://www.pera.state.nm.us/meetingaudio.html 참조).jquery-ui 아코디언 렌더링 내에서 여러 개의 jwplayer 오디오 플레이어를 만들고 제대로 작동 시키려면 어떻게해야합니까?
하지만 오디오 플레이어를 jquery-ui 아코디언에 넣으려고하고 있는데 모두 올바르지 않습니다. 아코디언 div 내부의 첫 번째 플레이어가 올바르게 렌더링되고 작동하지만 동일한 아코디언 div 안에있는 모든 후속 플레이어가 잘못 렌더링되어 재생되지 않습니다. 재생 버튼이 진행률 막대 아래에 표시됩니다. http://jsfiddle.net/timbck2/y4RSS/ :
<!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에서 볼 수
다음은 문제를 보여 일부 샘플 코드입니다.저는 jwplayer : 6.3242의 최신 버전 (오늘 현재, 2013 년 4 월 8 일)을 사용하고 있습니다.
아무도 도와 줄 수 있습니까?
업데이트 : Ethan이 지적했듯이 플레이어는 모두 Firefox v.20에서 정상적으로 작동합니다. 하지만 이들은 Chrome (v.26), IE (v.10) 및 Safari (Mac)에서 손상되었습니다. 다음은 아도비노에서 첫 번째 이후의 모든 플레이어에 대해 Firefox가 아닌 브라우저에서 보이는 것을 보여주는 이미지입니다.
재생 버튼이 진행률 막대 뒤에 숨겨져 있으며 클릭 할 수없는 것으로 보입니다.
문제가 아닌 jsfiddle 예가 있습니까? 그냥 빈 테스트 페이지. – emaxsaun
내가 일하고 여기에 올 때 나는 내일 무엇인가 놓을 것이다. – timbck2
FF20, Win7에서 이것을 확인한 결과, 모든 플레이어가 여기서 일합니다. – emaxsaun