2013-02-28 41 views
3

我試圖找出是否有可能更改默認HTML5 video元素爲cursor CSS屬性的CSS光標樣式。到目前爲止,我的測試總結如下:爲什麼沒有用戶代理實現對視頻內容

  1. 默認情況下,沒有用戶代理(瀏覽器)實現cursor: pointer。所以,你只剩下正常OS箭頭/控制指標

  2. 當您嘗試設置cursor: pointer,用戶代理會將光標只有光標未停在video元素中點擊元素...即:播放,暫停,尋找,靜音,全屏。

  3. 這似乎是逆向實施什麼應該發生。 video標記(控制條,中央播放按鈕)的可點擊元素應該獲得光標樣式...或地獄,只是將其應用於整個事物。

有沒有人有這方面的見解?

+0

2)在firefox中使用19.0以上的控件。整個視頻也是一個很大的可點擊元素。點擊除控件以外的其他位置會切換播放/暫停。 – Jrod 2013-02-28 18:26:43

+0

HTML5表示光標在視頻*上應該是*或*必須是*指針而不是由UA選擇?在CSS中,默認是'cursor:auto'。 – BoltClock 2013-02-28 18:29:57

+0

@Jodod Cool - 我不確定我是否在19年測試過它。 – tvpmb 2013-02-28 20:20:01

回答

3

對於webkit的,你可以針對自己的僞元素

video::-webkit-media-controls-panel 

video::-webkit-media-controls-play-button 

video::-webkit-media-controls-volume-slider-container 

video::-webkit-media-controls-volume-slider 

video::-webkit-media-controls-mute-button 

video::-webkit-media-controls-timeline 

video::-webkit-media-controls-current-time-display 

video::-webkit-full-page-media::-webkit-media-controls-panel 

video::-webkit-media-controls-timeline-container 

video::-webkit-media-controls-time-remaining-display 

video::-webkit-media-controls-seek-back-button 

video::-webkit-media-controls-seek-forward-button 

video::-webkit-media-controls-fullscreen-button 

video::-webkit-media-controls-rewind-button 

video::-webkit-media-controls-return-to-realtime-button 

video::-webkit-media-controls-toggle-closed-captions-button 

更新

擴展WebKit的僞元素的列表:https://gist.github.com/afabbro/3759334

+2

WebKit,你這麼瘋狂。 – BoltClock 2013-02-28 18:33:57

+1

瘋狂但也有種天才。使用僞元素,您可以爲您的網站的其餘部分創建具有匹配樣式的視頻播放器。 – Jrod 2013-02-28 18:46:13

+0

@Jrod真棒的人。我沒有想到通過*咳嗽*廣泛的僞元素列表。這應該讓老闆高興。是的,由於某種原因,它很重要...大聲笑 – tvpmb 2013-02-28 20:21:55

0

爲什麼沒有用戶代理實現的CSS光標風格的視頻元素?

因爲沒有必要爲它

這似乎是扭轉會發生什麼的實施。

你認爲 「應該」 發生的呢?互動元素不需要指針。例如,如果您將鼠標懸停在滾動條上,則箭頭將保持箭頭狀態。事實上,大多數計算機軟件的大部分按鈕都不會改變光標。這不是必要的,因爲交互式元素的焦點狀態的盤旋狀態足以提供可點擊性。

原因cursor: pointer是共同在網絡上,這是必要的原因是由於超鏈接。默認情況下,超鏈接不會對懸停作​​出反應。指針用於提示用戶點擊鏈接可以點擊

對於<video>元素,有足夠的懸停狀態,有沒有必要光標的變化。

相關問題