问题
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 indicatorWhen you attempt to set
cursor: pointer
, the user-agents will change the cursor ONLY when the cursor is not over clickable elements within thevideo
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?
回答1:
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
回答2:
Why do no user-agents implement the CSS cursor style for video elements?
Because there's no need for it
This seems to be reverse the implementation of what SHOULD happen.
What do you think "should" happen? Pointers are not necessary for interactive elements. For example, if you hover over the scroll bar your arrow stays an arrow. In fact, most buttons for most computer software do not change the cursor. It's not necessary, as the hover & focus states of interactive elements are enough to afford clickability.
The reason cursor: pointer
is common on the web, and the reason it's necessary is due to hyperlinks. Hyperlinks don't react on hover by default. A pointer is used to cue the user that the link can be clicked on.
For <video>
elements, there are sufficient hover states that there's no need for the cursor to change.
来源:https://stackoverflow.com/questions/15126921/why-do-no-user-agents-implement-the-css-cursor-style-for-video-elements