gpt4 book ai didi

css - Flowplayer 隐藏光标

转载 作者:太空宇宙 更新时间:2023-11-04 04:17:55 25 4
gpt4 key购买 nike

我想做什么?

当用户一段时间未与其交互时,我试图在 flowplayer 中隐藏鼠标光标。

我为什么要这样做?

我认为这是任何视频播放器的基本功能。所有其他播放器都这样做(YouTube、Vimeo、VideoJS 等)。开箱即用的 flowplayer 似乎没有这样的功能,所以我正在尝试以某种方式将其插入。

问题

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

最佳答案

解决方案

因此,要在 flowplayer 中隐藏鼠标光标,您可以使用以下 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 .

通知

有一个bugBlink rendering engine (Chrome 和 Opera 浏览器都使用)。正在讨论here与 flowplayer 开发人员。您可以尝试申请discussed solution自己或等待 flowplayer 修订版 5.5(当前 5.4.3)。

关于css - Flowplayer 隐藏光标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19630524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com