0

我想做什么？

当用户一段时间没有与它交互时，我试图在 flowplayer 中隐藏鼠标光标。

我为什么要这样做？

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

问题

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

4

1 回答 1

2

解决方案

因此，要在 flowplayer 中隐藏鼠标光标，您可以使用以下 CSS 代码：

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

请参阅 jsfiddle 上的演示。

解释

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

我们将光标替换为空的 PNG 图像或空的光标文件 (IE)。最后，我们回到了“ cursor: none; ”样式（在 CSS3 中有效）。

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

更详细地隐藏光标的 CSS 解决方案。

注意

Blink 渲染引擎（Chrome 和 Opera 浏览器都使用）中有一个错误。此处与 flowplayer 开发人员讨论。您可以尝试自己应用讨论过的解决方案，或者等待 flowplayer 修订版 5.5（当前为 5.4.3）。

于 2013-10-28T08:56:08.777 回答