jPlayer暂停按钮是内联显示的，但应该被阻塞。

Question

我使用jPlayer jquery主题：http://jplayer.org/latest/demo-07

当我点击我的播放器上的暂停按钮时，按钮显示“暂停”标题，而暂停图标没有显示。图标应该由jquery类放置:ui图标ui图标暂停。

在将其与上面链接中的原始样式进行比较时，我注意到在a元素中，"display: none“内联样式被display: inline替换。

在原来的版本中，它被display: block替换

<a title="pause" tabindex="2" class="jp-pause ui-icon ui-icon-pause" href="javascript:;" style="display: none;">pause</a>

在Firebug中修复这个图标呈现正确。

那么，为什么在我的播放器中单击“暂停”按钮时，它会将display: none替换为display: inline而不是display: block？

我猜jPlayer使用jquery的hide() & show()来切换按钮。

Answer 1

我刚和Jplayer一起解决了同样的问题。上面的初始注释是100%正确的，jquery ()方法指定了内联样式。以下是解决办法：

1. 转到开发人员网站并下载最新的非小型化源代码- 下载区。
2. 打开这个文件jquery.jplayer.js并找到第1621行
3. 执行以下更改

错误代码：

this.css.jq.pause.show();

改为(工作)：

this.css.jq.pause.css("display", "block");

太棒了，希望它对你有用

Answer 2

对我来说，这个问题是由于延迟加载样式表造成的。在初始化播放机之前，请确保已加载皮肤样式。

Answer 3

一开始，我尝试在“暂停”按钮样式中添加display: block;。只有这样，暂停按钮才会在加载时闪现。所以这不是一个好的解决方案。

通过Google搜索，我发现解决问题的一种方法是用一个分部改变锚点，如下所示：

内联版本：

<a href="#" class="jp-play">Play</a>
<a href="#" class="jp-pause">Pause</a>

整块版本：

<div class="jp-play">Play</div>
<div class="jp-pause">Pause</div>

然后，“暂停”按钮将如预期的那样显示为块。

来源：https://karolo.com/blog/developer/jplayer-how-to-use-jplayer-to-build-your-own-mp3-player.html