Geek asks and answers

The jPlayer pause button is displayed on the line, but should be locked

I am using jPlayer jquery-ui theme: http://jplayer.org/latest/demo-07

When I press the pause button on my player, the button shows the pause heading and the pause icon is not displayed. The icon should be placed in jquery-ui classes: ui-icon ui-icon-pause

Comparing it with the original from the link above, I noticed that in the "style: no" element, the inline style is replaced by display: inline.
In the original, it is replaced bydisplay: block

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

When setting this in Firebug, the icon displays correctly.

So why does it replace display: nonewith display: inlineinstead of display: blockin my player when the pause button is pressed?

I assume jPlayer uses the hide () and show () functions of jquery to switch buttons.

+3
source share
3 answers

I just struggled on the same issue with Jplayer. Your initial comment above was 100% correct, the jquery show () method assigns an inline style. Here is the fix:

  • Go to the developers website and download the latest unexhausted source code - Jplayer download area
  • Open this jquery.jplayer.js file and find line 1621
  • Make the following change

Error code:

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

Change to (working):

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

Amazingly, hope this works for you.

+4
source

For me, this problem was caused by a delay in loading styles. Before initializing the player, be sure to download the skin styles.

+1

At first I tried to add display: block;pause buttons to the styles. Only this makes the pause button flash at boot. This was not a good solution.

Searching with Google I found that one way to fix the problem is to change the binding using division, as in:

Embedded Version:

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

Block Version:

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

Then the pause button is displayed as a block, as expected.

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

0
source

More articles:


All Articles