如果没有示例 URL,就无法确定这里发生了什么,但需要牢记以下几点:
使用 JPlayer 时,一旦您使用 API 的 'cssSelectors' 属性“绑定”了控件,它将使用 Javascript DOM 方法并通过将内联 CSS 应用于 DOM 项来操作这些控件本身。
首先,值得知道 JPlayer 会在适当的时候一次隐藏一个播放和暂停按钮。例如,当曲目正在播放时,它会隐藏播放按钮,而当曲目暂停时,它将隐藏播放按钮 - 这可能是您的一些问题的原因。
更可能的问题是您有按钮的 div 容器,并且正在指定它们,然后 jPlayer 正在清除它们的内容。如果您更改按钮 div 中的图像,并在 div 上使用背景和指定大小,我怀疑您的代码将起作用。
您的代码如下所示:
<div id="audio-player">
<div id="track-info">
</div>
<div id="player-buttons">
<div id="player">
<div id="playButton" class="button">
<img id="play-button" src="images/bage-playing.png" />
</div>
<div id="pauseButton" class="button">
<img id="pause-button" src="images/bage-paused.png" />
</div>
<div id="stopButton" class="button">
<img id="stop-button" src="images/bage-busy.png" />
</div>
</div>
</div>
</div>
我将其更改为:
<div id="audio-player">
<div id="track-info">
</div>
<div id="player-buttons">
<div id="player">
<div id="playButton" class="button">
</div>
<div id="pauseButton" class="button">
</div>
<div id="stopButton" class="button">
</div>
</div>
</div>
</div>
然后添加一些像这样的 css 来恢复图像:
#playButton {
background: transparent url('images/bage-playing.png') no-repeat;
height: 20px; /* Correct this size ;-) */
width: 20px; /* Also correct this size ;-) */
}
然后对每个按钮执行相同的操作,我希望您的代码能够正常工作。如果没有,请发回您正在做的演示的 URL,我会仔细查看。
欧文
附录:
现在您已经发布了代码,我可以看到两个问题,希望在您修复它们时使其正常工作:
首先,您在 javascript 中选择元素而不是 ID。在您拥有“cssSelector”对象的地方,您使用的字符串说:
cssSelector: {
play: 'playButton',
pause: 'pauseButton',
stop: 'stopButton'
},
当他们应该说:
cssSelector: {
play: '#playButton',
pause: '#pauseButton',
stop: '#stopButton'
},
您的版本将按名称而不是 ID 选择元素,例如 not 。我猜这是因为您习惯使用 document.getElementById,或者 mooTools。
除此之外,您在 JPlayer 设置中的“就绪”调用缺少一个功能。它看起来像这样:
ready: jQuery(this).jPlayer("setMedia", {
mp3: 'http://www.karolodesign.com/media/music/bass-walker.mp3'
});
应该是这样的:
ready: function() { // This bit!
jQuery(this).jPlayer("setMedia", {
mp3: 'http://www.karolodesign.com/media/music/bass-walker.mp3'
});
}
这是我的错,因为我在网站上的原始示例实际上是错误的!我会马上纠正。
解决这两个问题,应该没问题。JQuery 抛出错误,但我认为这只是因为缺少函数。如果它不起作用,请告诉我,我再看看。
欧文