本文介绍如何通过监听 html5 视频元素的 `play` 和 `pause` 事件，结合 javascript 动态添加/移除 css 类，并在不同状态下（播放中/暂停）为 hover 光标设置不同的自定义图片。纯 css 无法检测播放状态，必须借助 js 实现状态感知。
要实现“鼠标悬停时，根据视频当前是否正在播放显示不同光标（如 play/pause 图标）”，核心在于：将视频的运行时状态映射为可被 CSS 选择器识别的 DOM 状态。由于 CSS 本身无法读取
✅ 实现步骤
- 监听关键事件：为
- 同步 DOM 状态：在 play 时添加 .playing 类，在 pause 时移除；
- 编写条件化 cursor 样式：利用 video:hover 与 video.playing:hover 的组合选择器，分别定义不同光标。
? 示例代码
<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>
const video = document.getElementById('myVideo');
// ✅ 基础状态同步（play/pause）
video.addEventListener('play', () => video.classList.add('playing'));
video.addEventListener('pause', () => video.classList.remove('playing'));
// ⚠️ 增强健壮性：补充 error、ended、emptied 等场景
video.addEventListener('error', () => video.classList.remove('playing'));
video.addEventListener('ended', () => video.classList.remove('playing'));
video.addEventListener('emptied', () => video.classList.remove('playing'));
// ? 可选：初始状态校准（例如页面加载后视频已自动播放）
if (!video.paused && !video.ended) {
video.classList.add('playing');
}/* 默认悬停光标：播放图标（base64 编码的 "▶"） */
video:hover {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233498db' d='M8 5v14l11-7z'/%3E%3C/svg%3E"), auto;
}
/* 播放中悬停光标：暂停图标（base64 编码的 "⏸"） */
video.playing:hover {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='4' width='4' height='16' fill='%23e74c3c'/%3E%3Crect x='14' y='4' width='4' height='16' fill='%23e74c3c'/%3E%3C/svg%3E"), auto;
}
/* 可选：视觉反馈增强（如边框变色） */
video.playing { border: 2px solid #2ecc71; }
video:hover { border: 2px solid #3498db; }⚠️ 注意事项
- 光标兼容性：自定义 cursor 在所有现代浏览器中支持良好，但需确保 base64 数据 URI 长度适中（建议 ≤ 32KB），过长可能被 Safari 或旧版 Edge 截断；推荐使用 SVG data URI（如上例），体积小、缩放无损、易于维护。
- 状态完整性：仅监听 play/pause 不足以覆盖全部场景（如用户拖动进度条后视频自动暂停、网络中断触发 error）。务必补充 error、ended、emptied 等事件处理，避免 .playing 类残留导致光标错乱。
- 初始状态：页面加载后若视频已自动播放（如设置了 autoplay），需手动检查 !video.paused 并初始化 class，否则首帧光标不生效。
- 移动端限制：iOS Safari 和部分 Android 浏览器对 hover 伪类支持有限（尤其在触摸设备上），建议搭配 :focus-visible 或点击交互做降级处理。
✅ 总结
该方案以“事件驱动 + 类名映射 + CSS 条件样式”为设计范式，轻量、可扩展、语义清晰。你不仅可以用于播放/暂停光标切换，还可延伸至“静音/非静音”、“全屏/退出全屏”等任意可监听的媒体状态，只需新增对应事件监听与 CSS 规则即可。真正实现「状态即样式」的响应式交互体验。
