"cursor: none;" prevents toolbar from auto-hiding (Chrome, Opera) #554
Comments
This browser bug is the problem: https://code.google.com/p/chromium/issues/detail?id=103041 @nnarhinen - videojs uses the following workaround: this.tech.one('mousemove', function(e){
e.stopPropagation();
e.preventDefault();
}); |
I think I'll just bake this in core as it seems it's not trivial to style / script, thank you again Chrome.. Thanks @blacktrash for digging up that bug and workaround. |
Thanks ) |
Design-wise it's probably ok to do this, even non-optional. However, one can't say that all other players do this, as far as I can see JWPlayer does not. Personally I would rather be more irritated by the long hiding delay of the controlbar in fullscreen because the mouse cannot leave the player area - shorter intervall for fullscreen? (well, one can't make everyone happy) |
It seems with current chrome .flowplayer.is-mouseout .fp-ui {
cursor: none;
} works ok |
@nnarhinen you are a genius works perfectly on chrome, now I am able to remove annoying cursor on video. |
can't believe I am posting this in 2018, just know that your solution is still valuable. |
Hello there again )
Let me revisit this topic in a more structural way.
What i'm trying to do?
I'm trying to hide mouse cursor in flowplayer when the user is not interacting with it for some time.
Why i'm doing this?
I consider this a basic functionality for any video player. All other players do this (YouTube, Vimeo, VideoJS, etc). Looks like there is no such functionality in flowplayer out of the box so i'm trying to plug it in somehow.
Where i can see a demonstration of this issue?
http://jsfiddle.net/mM5QT/5/
First player is not auto-hiding the toolbar because of "cursor: none;" CSS instruction, second player is working properly.
How do i implement it?
I've played with the DOM inspector and found out that player's container gets class "is-mouseout" when cursor is not moving over it for some time (at the same time when toolbar auto-hides). So i'm trying to use this CSS-selector to apply "cursor: none;" instruction in order to hide the cursor. This CSS-selector was also recommended here.
I'm using latest flowplayer 5.4.3 commercial. This bug can be observed with Google Chrome browser (Firefox is working just fine). Looks like this CSS rule triggers cursor detection somehow.
The solution to hide mouse cursor is here.
The text was updated successfully, but these errors were encountered: