为什么没有用户代理实现视频元素的CSS光标样式 [英] Why do no user-agents implement the CSS cursor style for video elements

问题描述

我想弄清楚是否可以更改默认HTML5 视频上的 cursor 的CSS属性元素。到目前为止，我的测试已经得出结论：

1. 没有用户代理（浏览器）实现 cursor：pointer 。




2. 当您尝试设置 cursor：pointer ，则用户代理只会在光标不在视频元素内的可点击元素时更改光标。ie：播放，暂停，查找，静音，全屏。




3. 这似乎是应该发生什么的反转。 视频标签（控制栏，中心播放按钮）的可点击元素应该获得光标样式...或地狱，只是应用它的整个事情。

有人对此有任何见解吗？

解决方案

对于webkit，您可以定位其伪元素

  video ::  -  webkit-media- 
 
 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-control-panel 
 
 video ::  -  webkit-media-controls-timeline-container 
 
 video ::  -  webkit-media-control-time- 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  
 
I'm trying to figure out if it is possible to change the CSS property for cursor on a default HTML5 video element. So far, my testing has concluded:

No user-agents (browsers) implement cursor: pointer by default. So you are left with the normal OS arrow/control indicator
When you attempt to set cursor: pointer, the user-agents will change the cursor ONLY when the cursor is not over clickable elements within the video element... ie: play, pause, seek, mute, fullscreen.
This seems to be reverse the implementation of what SHOULD happen. The clickable elements of the video tag (control bar, center play button) should get the cursor style...or hell, just apply it to the whole thing.
Does anyone have any insight on this?
解决方案
For webkit you can target their pseudo elements
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
Update

Extended list of webkit pseudo elements: https://gist.github.com/afabbro/3759334 

                        
这篇关于为什么没有用户代理实现视频元素的CSS光标样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！