Skip to content
This repository has been archived by the owner on Sep 30, 2021. It is now read-only.

"cursor: none;" prevents toolbar from auto-hiding (Chrome, Opera) #554

Closed
slavafomin opened this issue Oct 25, 2013 · 7 comments
Closed

Comments

@slavafomin
Copy link

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.

@phloxic
Copy link
Contributor

phloxic commented Oct 26, 2013

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();                                                                                           
});

@nnarhinen
Copy link
Member

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.

@slavafomin
Copy link
Author

Thanks )
I can also confirm this bug in latest Opera browser.
Looks like it's a bug of the Blink layout engine (used both by Chrome and Opera).

@phloxic
Copy link
Contributor

phloxic commented Oct 28, 2013

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)

@nnarhinen nnarhinen modified the milestones: 6.0 - next major release, 5.5 Apr 14, 2014
@nnarhinen
Copy link
Member

It seems with current chrome

.flowplayer.is-mouseout .fp-ui {
  cursor: none;
}

works ok

@nnarhinen nnarhinen removed this from the 6.0 - next major release milestone Nov 21, 2014
@metsehaf
Copy link

@nnarhinen you are a genius works perfectly on chrome, now I am able to remove annoying cursor on video.

@metsehaf
Copy link

can't believe I am posting this in 2018, just know that your solution is still valuable.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants