Flowplayer hide cursor

Question

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.

Question

How do i hide mouse cursor in flowplayer when client is not interacting with the player for some time?

Answer 1

Solution

So to hide the mouse cursor in flowplayer you can use the following CSS code:

.flowplayer.is-mouseout .fp-ui {
    cursor:
        url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAADUlEQVQYV2P4//8/IwAI/QL/+TZZdwAAAABJRU5ErkJggg=='),
        url('blank.cur'),
        none !important
    ;
}

See the Demo on jsfiddle.

Explanation

The flowplayer will attach CSS class called "is-mouseout" both when cursor is out of the player and when the cursor is not moving for some time (at the same time when toolbar auto-hides).

We are replacing the cursor with an empty PNG image or an empty cursor file (IE). In the end we are falling back to the "cursor: none;" style (valid in CSS3).

Don't forget to create zero-length "blank.cur" file in proper location!

CSS solution to hide the cursor in more detail.

Notice

There is a bug in Blink rendering engine (used both by Chrome and Opera browsers). It is discussed here with the flowplayer developers. You can try to apply discussed solution yourself or just wait for flowplayer revision 5.5 (current 5.4.3).