Flowplayer隐藏光标

Question

我想做什么？

当用户暂时没有与鼠标光标进行交互时，我试图将鼠标光标隐藏在流动播放器中。

我为什么要这样做？

我认为这是任何视频播放器的基本功能。所有其他玩家都这样做（YouTube，Vimeo，VideoJS等）。看起来流媒体开箱即用，所以我试图以某种方式插入它。

问题

当客户端未与播放器交互一段时间后，如何在流动播放器中隐藏鼠标光标？

Answer 1

解决方案

因此，要在流动播放器中隐藏鼠标光标，您可以使用以下CSS代码：

.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.

解释

当光标不在播放器中并且当光标没有移动一段时间时（同时当工具栏自动隐藏时），flowplayer将附加名为“ is-mouseout ”的CSS类）。

我们正在用空的PNG图像或空的光标文件（IE）替换光标。最后我们回到“ cursor：none; ”样式（在CSS3中有效）。

不要忘记在适当的位置创建零长度的“ blank.cur ”文件！

CSS solution to hide the cursor in more detail

注意

bug中有Blink rendering engine（Chrome浏览器和Opera浏览器均使用）。与流程开发者讨论了here。您可以尝试自己申请discussed solution，或者只是等待流程图修订版5.5（当前版本5.4.3）。