为啥没有用户代理为视频元素实现 CSS 光标样式

Posted 2023-05-08

【中文标题】为啥没有用户代理为视频元素实现 CSS 光标样式

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

【发布时间】：2013-02-14 03:15:05

【问题描述】：

我正在尝试确定是否可以在默认 html5 video 元素上更改 cursor 的 CSS 属性。至此，我的测试已经结束：

默认情况下没有用户代理（浏览器）实现cursor: pointer。所以你只剩下正常的操作系统箭头/控制指示器了

当您尝试设置cursor: pointer 时，只有当光标不在video 元素内的可点击元素上时，用户代理才会更改光标...即：播放、暂停、搜索、静音，全屏。

这似乎与应该发生的事情相反。 video 标签的可点击元素（控制栏、中心播放按钮）应该获得光标样式...或者地狱，只需将其应用于整个事物。

有人对此有任何见解吗？

【问题讨论】：

2) 在 Firefox 19.0 中通过控件工作。整个视频也是一个大的可点击元素。单击控件以外的其他位置会切换播放/暂停。

HTML5 是否规定视频上的光标应该是或必须是指针，而不是由 UA 选择？在 CSS 中，默认为cursor: auto。

@Jrod Cool - 不确定我是否在 19 年测试过。

@BoltClock 我并不是建议它应该被强制，但是当一个项目是可点击的时候cursor: auto应该是pointer，不是吗？

@tvpmb，不，不应该。仅对不具备可点击性的元素才需要。

【参考方案1】：

对于 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

【讨论】：

疯狂但也是一种天才。使用伪元素，您可以创建一个与您网站的其余部分匹配的视频播放器。

@Jrod 很棒的人。我没想过要查看 cough 广泛的伪元素列表。这应该会让老板高兴。是的，出于某种原因，这很重要……哈哈

@tvpmb 在你问这个问题之前我才知道它们的存在所以我们今天都学到了一些东西！

FWIW - 看看我发现了什么，这只是 webkit，但无论哪种方式都可以参考：gist.github.com/afabbro/3759334

正是我从 ha 那里得到它们的。我会将链接添加到答案中，以便为未来的用户提供更好的可见性。

【参考方案2】：

为什么没有用户代理为视频元素实现 CSS 光标样式？

因为没必要

这似乎与应该发生的事情相反。

你认为“应该”发生什么？交互元素不需要指针。例如，如果您将鼠标悬停在滚动条上，您的箭头将保持为箭头。事实上，大多数计算机软件的大多数按钮都不会改变光标。这不是必需的，因为交互元素的悬停和焦点状态足以提供可点击性。

cursor: pointer 在网络上很常见，之所以必要，是因为超链接。默认情况下，超链接不会对悬停做出反应。指针用于提示用户链接可以被点击。

对于<video> 元素，有足够的悬停状态，无需更改光标。