本文详解如何基于 HTML5 视频播放状态（播放中或已暂停），通过 JavaScript 监听事件 + CSS 类切换，实现悬停时显示不同自定义光标（如 play/pause 图标），兼顾兼容性与可维护性。
本文详解如何基于 HTML5 视频播放状态（播放中或已暂停），通过 JavaScript 监听事件 + CSS 类切换，实现悬停时显示不同自定义光标（如 play/pause 图标），兼顾兼容性与可维护性。
在 Web 开发中，为提升用户交互反馈，常需根据媒体元素的运行状态动态调整 UI 行为。针对 <video> 元素，仅靠纯 CSS 无法感知其播放状态（playing/paused），因此必须结合 JavaScript 监听原生事件，并通过 DOM 类名控制样式逻辑。
核心实现思路
- 监听关键事件：play（开始播放）、pause（暂停）、ended（播放结束）——注意 ended 状态下视频实际已暂停，应统一归入“非播放”态；
- 动态切换状态类：为 <video> 元素添加/移除 .is-playing 类；
- CSS 分层定义光标：利用 :hover 与状态类组合选择器，分别设置不同 cursor 值。
完整示例代码
<!DOCTYPE html>
<html>
<head>
<style>
/* 基础视频样式 */
#myVideo {
width: 100%;
max-width: 640px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
/* 默认悬停光标：播放图标（base64 编码的 play 按钮） */
#myVideo:hover {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQVEBgE0YdPfwAAAWRJREFUSMe1lj1Ow0AQhb/dEFf81DQRFBFFIiFEyRmgpEFQ0HIFukhwgfRcBG6QIgfIIWiRkzyKjNFmWSdObI802l17Zt7M7tuxHQkROMDbcgGrBwm7Qjo2Lt3a45X40EFmbIYDoO+CIEoEt/d9YFAACDoqyd4LzgRTgSIdBYmEYKOE7dTieKIKvODOjPKEYy6YRUnNNtjK4vmwtF7CONYfwZf5fNp6m0+vOAIEk5KsUvpe0S4XTP5IowQjmhIHzguGtCiCoQ843pZ4JzgBvlsEOQzPRCUXu8ZOMXeQeWshYyBvuII5KyZ2nMA5o13DVTgHTta7JOgC980yl0uL+w9+XPGibdOHtd6VAPqoCfC8cROD+dueALeVTiuYP1UMvLTxSrtebGvTN1GgWBc2ngqyfXnYFVyUABUAx4JMNQmfCc5LtuioNkAEdB0BnTcGEJ3RiwE8Cg7a/D68thk8/CfbqdH9ApMWkjfHYjo+AAAAAElFTkSuQmCC'), auto;
}
/* 播放中状态下的悬停光标：暂停图标（base64 编码的 pause 按钮） */
#myVideo.is-playing:hover {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AQVEBgE0YdPfwAAAWRJREFUSMe1lj1Ow0AQhb/dEFf81DQRFBFFIiFEyRmgpEFQ0HIFukhwgfRcBG6QIgfIIWiRkzyKjNFmWSdObI802l17Zt7M7tuxHQkROMDbcgGrBwm7Qjo2Lt3a45X40EFmbIYDoO+CIEoEt/d9YFAACDoqyd4LzgRTgSIdBYmEYKOE7dTieKIKvODOjPKEYy6YRUnNNtjK4vmwtF7CONYfwZf5fNp6m0+vOAIEk5KsUvpe0S4XTP5IowQjmhIHzguGtCiCoQ843pZ4JzgBvlsEOQzPRCUXu8ZOMXeQeWshYyBvuII5KyZ2nMA5o13DVTgHTta7JOgC980yl0uL+w9+XPGibdOHtd6VAPqoCfC8cROD+dueALeVTiuYP1UMvLTxSrtebGvTN1GgWBc2ngqyfXnYFVyUABUAx4JMNQmfCc5LtuioNkAEdB0BnTcGEJ3RiwE8Cg7a/D68thk8/CfbqdH9ApMWkjfHYjo+AAAAAElFTkSuQmCC'), auto;
}
/* 可选：视觉反馈增强（如边框变色） */
#myVideo.is-playing {
outline: 2px solid #4CAF50;
}
</style>
</head>
<body>
<h2>动态光标演示：视频播放状态感知</h2>
<video id="myVideo" controls width="640" height="360">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
<script>
const video = document.getElementById('myVideo');
// 监听播放开始事件（包括首次播放、resume）
video.addEventListener('play', () => {
video.classList.add('is-playing');
});
// 监听暂停、结束、加载失败等导致停止播放的事件
['pause', 'ended', 'error', 'waiting'].forEach(event => {
video.addEventListener(event, () => {
video.classList.remove('is-playing');
});
});
// 补充：初始状态检查（避免页面加载后自动播放未触发事件）
if (!video.paused && !video.ended) {
video.classList.add('is-playing');
}
</script>
</body>
</html>关键注意事项
- ✅ 事件覆盖要全面：除 play/pause 外，务必监听 ended（自然结束）、error（加载失败）、waiting（缓冲中暂停）等场景，确保状态类及时同步；
- ✅ 初始状态兜底：页面加载后若视频已自动播放（autoplay），play 事件可能已被错过，需手动检测 !video.paused && !video.ended 并设类；
- ⚠️ 光标兼容性：自定义光标（url()）在 Safari 和部分移动端存在限制（如尺寸上限 128×128px、需指定 fallback auto 或 pointer），建议使用压缩后的 32×32 或 48×48 PNG；
- ⚠️ 性能友好：避免在 timeupdate 等高频事件中操作 DOM 类；本方案仅依赖离散状态变更事件，开销极低；
- ? 扩展性强：该模式可轻松复用于其他状态，例如 .is-muted（静音）、.is-fullscreen（全屏）等，只需新增对应事件监听与 CSS 规则。
通过以上结构化实现，你不仅能精准响应视频播放状态切换光标，更构建了一套可复用的状态驱动 UI 模式，为复杂媒体交互提供坚实基础。
