jplayer / jPlayer

jPlayer : HTML5 Audio & Video for jQuery
http://jplayer.org/
Other
4.6k stars 1.47k forks source link

2.9.2 Pause button. #287

Closed bringerofrain closed 9 years ago

bringerofrain commented 9 years ago

Pause button in player (Blue monday) not pausing player when in Playing state, yet a call to jPlayer("pause") will pause the audio from an external bound button.

thepag commented 9 years ago

Do you have an example, a link, of it failing? Please give details on the browser you used too.

I just did a simple review of our demo and it seemed to work ok for me in Chrome.

I would like to know more tho, because there was a similar issue on a website I was asked to review. In that case, the stateClasses were not being added to the cssSelectorAncestor element, so th icon looked incorrect, but clicks on the button still worked as expected. ie., The audio was playing, but the play icon remained, but clicks on the play button while playing did pause the audio. So in this case, it was the GUI controls that displayed wrong, but the underlying functionality worked.

Elijahqm commented 9 years ago

Hi, This was also my case. When clicked, the play button changed to pause image, but clicking on pause didn't do anything. The problem occurs when you set useStateClassSkin to false.

Hopefully it works for you too.

thepag commented 9 years ago

I quote:

The problem occurs when you set useStateClassSkin to false.

The skins are designed to work with {useStateClassSkin:true} which is why they do not work when you turn on that option.

So it sounds like they are working fine after all. You can try using the older skins if you want to turn that option off. The whole point of that option is that the accessibility of the player is greatly enhanced. But if you do not care about blind or the visually impaired visiting your site you can go away and make your own skin. I mean, we still have the old skins available in the repo and you can even look at the commit where the old skins were changed to new skins.

Here is the one fo the pink flag skin. Changed Pink Flag CSS to stateClassSkin type.

But as I was saying, you can get them from the older distributions if you choose... From before that commit, it looks like 2.7.1 will be fine for just the CSS.

Remember that the HTML structure does change a little too... So you will need to find that too.

I am closing this commit.

thepag commented 9 years ago

For future ref, the migration log covers updating issues.

The link to the 2.7.1 release is here: https://github.com/happyworm/jPlayer/releases/tag/2.7.1

The docs on the option are here: http://jplayer.org/latest/developer-guide/#jPlayer-option-useStateClassSkin

They may help you understand better. To change between the skins was not that complicated, but the benefit for ARIA was huge. If you were using the jPlayer skins, then just update the HTML and CSS to the new skin type. If you made your own design, then review the commit I posted and compare the HTML. Simply put, the HTML now only uses a single element for both the play and pause button, so the old skins have an extra element in them to pause - so delete it. Likewise for any other toggle.

calvincorreli commented 9 years ago

FYI, I just ran into the same problem. For me the issue was that I had the .jp-pause button start out as display:none in my stylesheet, which then causes jQuery to use display:inline when showing it, which I guess then makes Chrome assign it zero height and make it unclickable? Or something?

Simply getting rid of the display:none in my CSS fixed it.

Offering it here just in case anyone else bumps into something similar. It may very well be something I introduced to the stylesheet in the first place.