Flowplayer скрыть курсор

Question

Что я пытаюсь сделать?

Я пытаюсь скрыть указатель мыши в flowplayer, когда пользователь не взаимодействует с ним в течение некоторого времени.

Почему я это делаю?

Я считаю эту базовую функциональность для любого видеоплеера. Все остальные игроки делают это (YouTube, Vimeo, VideoJS и т. Д.). Похоже, в Flowplayer нет такой функциональности, поэтому я пытаюсь как-то подключить ее.

Вопрос

Как скрыть курсор мыши в FlowPlayer, когда клиент не взаимодействует с игроком в течение некоторого времени?

Answer 1

Решение

Таким образом, чтобы скрыть курсор мыши в 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 присоединит класс CSS под названием " is-mouseout «оба, когда курсор находится вне игрока и когда курсор не движется в течение некоторого времени (в то же время, когда авто-скрывает панель инструментов).

Мы заменяем курсор пустым изображением PNG или пустым файлом курсора (IE). В конце мы возвращаемся к «курсору: нет,» стиль (действителен в CSS3).

Не забудьте создать нулевую длину «blank.cur» файл в правильном месте!

CSS solution to hide the cursor in more detail.

Уведомление

Существует в Blink rendering enginebug (использоваться как Chrome и Opera браузеров). Обсуждается here с разработчиками Flowplayer. Вы можете попытаться применить discussed solution самостоятельно или просто дождаться версии 5.5 (см. 5.4.3).