0

私は何をしようとしていますか？

ユーザーがしばらく操作していないとき、フロープレーヤーでマウスカーソルを非表示にしようとしています。

なぜ私はこれをしているのですか？

これは、あらゆるビデオ プレーヤーの基本的な機能であると考えています。他のすべてのプレイヤー (YouTube、Vimeo、VideoJS など) はこれを行います。すぐに使用できるフロープレーヤーにはそのような機能がないように見えるので、何とかプラグインしようとしています。

質問

クライアントがプレーヤーとしばらくやり取りしていないときに、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 に答える