本文介绍如何基于 html5 视频播放状态（播放中/已暂停），通过 javascript 监听事件并配合 css 类切换，实现悬停时显示不同自定义光标（如 play/pause 图标），无需第三方库，兼容现代浏览器。
本文介绍如何基于 html5 视频播放状态（播放中/已暂停），通过 javascript 监听事件并配合 css 类切换，实现悬停时显示不同自定义光标（如 play/pause 图标），无需第三方库，兼容现代浏览器。
在 Web 开发中，为提升用户体验，常需根据媒体元素的实时状态动态调整交互反馈。视频元素（<video>）的悬停光标就是一个典型场景：当视频正在播放时，悬停应显示「暂停」图标；当处于暂停或未开始状态时，则显示「播放」图标。纯 CSS 无法感知播放状态，因此需结合 JavaScript 事件监听与 CSS 类控制来实现。
核心实现思路
- 监听视频生命周期事件：利用 play 和 pause 事件，在播放开始时添加 .playing 类，暂停时移除该类；
- CSS 分层定义光标：为默认态和 .playing 态分别设置 :hover 下的不同 cursor 值（支持 url() 自定义光标）；
- 确保光标资源可用：推荐使用内联 Base64 图标（避免跨域或加载失败），并始终以 , auto 结尾作为降级回退。
完整示例代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>视频状态感知光标</title>
<style>
/* 播放中 → 悬停显示 pause 光标 */
#myVideo.playing:hover {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQVEBgE0YdPfwAAAWRJREFUSMe1lj1Ow0AQhb/dEFf81DQRFBFFIiFEyRmgpEFQ0HIFukhwgfRcBG6QIgfIIWiRkzyKjNFmWSdObI802l17Zt7M7tuxHQkROMDbcgGrBwm7Qjo2Lt3a45X40EFmbIYDoO+CIEoEt/d9YFAACDoqyd4LzgRTgSIdBYmEYKOE7dTieKIKvODOjPKEYy6YRUnNNtjK4vmwtF7CONYfwZf5fNp6m0+vOAIEk5KsUvpe0S4XTP5IowQjmhIHzguGtCiCoQ843pZ4JzgBvlsEOQzPRCUXu8ZOMXeQeWshYyBvuII5KyZ2nMA5o13DVTgHTta7JOgC980yl0uL+w9+XPGibdOHtd6VAPqoCfC8cROD+dueALeVTiuYP1UMvLTxSrtebGvTN1GgWBc2ngqyfXnYFVyUABUAx4JMNQmfCc5LtuioNkAEdB0BnTcGEJ3RiwE8Cg7a/D68thk8/CfbqdH9ApMWkjfHYjo+AAAAAElFTkSuQmCC'), auto;
}
/* 默认态（暂停/未播放）→ 悬停显示 play 光标 */
#myVideo:hover {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQVEBgE0YdPfwAAAWRJREFUSMe1lj1Ow0AQhb/dEFf81DQRFBFFIiFEyRmgpEFQ0HIFukhwgfRcBG6QIgfIIWiRkzyKjNFmWSdObI802l17Zt7M7tuxHQkROMDbcgGrBwm7Qjo2Lt3a45X40EFmbIYDoO+CIEoEt/d9YFAACDoqyd4LzgRTgSIdBYmEYKOE7dTieKIKvODOjPKEYy6YRUnNNtjK4vmwtF7CONYfwZf5fNp6m0+vOAIEk5KsUvpe0S4XTP5IowQjmhIHzguGtCiCoQ843pZ4JzgBvlsEOQzPRCUXu8ZOMXeQeWshYyBvuII5KyZ2nMA5o13DVTgHTta7JOgC980yl0uL+w9+XPGibdOHtd6VAPqoCfC8cROD+dueALeVTiuYP1UMvLTxSrtebGvTN1GgWBc2ngqyfXnYFVyUABUAx4JMNQmfCc5LtuioNkAEdB0BnTcGEJ3RiwE8Cg7a/D68thk8/CfbqdH9ApMWkjfHYjo+AAAAAElFTkSuQmCC'), auto;
}
/* 可选：视觉反馈增强（如边框颜色变化） */
#myVideo {
border: 3px solid #ccc;
transition: border-color 0.2s;
}
#myVideo.playing {
border-color: #4CAF50;
}
#myVideo:hover {
border-color: #2196F3;
}
#myVideo.playing:hover {
border-color: #FF9800;
}
</style>
</head>
<body>
<h2>视频播放状态感知光标演示</h2>
<video id="myVideo" controls width="400" preload="metadata">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
<script>
const video = document.getElementById('myVideo');
// 监听播放/暂停事件，动态切换 playing 类
video.addEventListener('play', () => {
video.classList.add('playing');
});
video.addEventListener('pause', () => {
video.classList.remove('playing');
});
// 补充：处理加载完成但尚未播放的初始态（可选）
video.addEventListener('loadedmetadata', () => {
if (video.paused && !video.ended) {
video.classList.remove('playing');
}
});
// ⚠️ 注意事项：
// - `ended` 事件后视频自动暂停，但不会触发 pause，建议额外监听 `ended`
// - 若视频出错（error），可能处于 paused 状态但无明确事件，可结合 `video.error` 判断
// - 移动端 Safari 对自定义 cursor 支持有限（尤其 `url()`），生产环境建议降级为系统光标或禁用
</script>
</body>
</html>关键注意事项与最佳实践
- ✅ 事件覆盖完整性：除 play/pause 外，建议补充监听 ended、error 和 loadedmetadata，确保状态同步准确；
- ✅ Base64 图标优化：使用小尺寸（16×16 或 32×32 px）、单色 PNG，减小 Base64 字符串体积；
- ⚠️ 移动端兼容性：iOS Safari 及部分安卓浏览器不支持 cursor: url()，此时会直接忽略并回退至 auto。可在 JS 中检测支持性，或统一使用 cursor: pointer + 工具提示（title 属性）作为降级方案；
- ⚠️ 性能与可访问性：避免在高频事件（如 timeupdate）中操作 DOM；同时确保图标语义清晰，必要时辅以 aria-label 或视觉文字说明；
- ? 状态健壮性：可通过 video.paused 属性主动校验当前状态（如页面恢复焦点时），避免因事件丢失导致样式错位。
通过以上方法，你不仅能实现“播放/暂停”双态光标切换，还可轻松扩展至其他状态（如静音/非静音、全屏/退出全屏等），为多媒体交互提供更直观、专业的用户反馈。
