如何动态切换视频元素的悬停光标样式（播放/暂停状态）-html教程-PHP中文网

如何动态切换视频元素的悬停光标样式（播放/暂停状态）

本文介绍如何通过 JavaScript 监听 HTML5 视频的 play 和 pause 事件，动态为视频容器添加状态类，并结合 CSS 实现基于播放状态的自定义悬停光标（如 play/pause 图标），无需第三方库，纯原生方案。

本文介绍如何通过 javascript 监听 html5 视频的 `play` 和 `pause` 事件，动态为视频容器添加状态类，并结合 css 实现基于播放状态的自定义悬停光标（如 play/pause 图标），无需第三方库，纯原生方案。

在 Web 开发中，仅靠 CSS 无法感知

以下为完整、可直接运行的实现方案：

✅ 步骤一：HTML 结构（含视频与基础样式）

<video id="myVideo" controls width="400" height="225"><source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
  Your browser does not support the video tag.
</source></video>

✅ 步骤二：JavaScript 状态监听与类管理

const video = document.getElementById('myVideo');

// 播放时添加 .playing 类
video.addEventListener('play', () => {
  video.classList.add('playing');
});

// 暂停、加载结束、时间更新中断等场景均可能触发 pause；建议补充 error 处理
video.addEventListener('pause', () => {
  video.classList.remove('playing');
});

// 【增强健壮性】补充：页面可见性变化或播放异常时同步状态
document.addEventListener('visibilitychange', () => {
  if (document.hidden && !video.paused) {
    video.pause(); // 可选：自动暂停后台视频
  }
});

⚠️ 注意：pause 事件在用户点击暂停、调用 video.pause()、播放自然结束（ended）或发生错误（error）时均会触发。若需更精确控制（如区分“用户主动暂停”与“播放完成”），可监听 ended 事件单独处理，但对光标切换而言，统一移除 .playing 是合理且简洁的做法。

✅ 步骤三：CSS 定义双态悬停光标

/* 默认悬停：显示「播放」图标光标 */
#myVideo:hover {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232196F3' d='M8 5v14l11-7z'/%3E%3C/svg%3E"), auto;
}

/* 播放中悬停：显示「暂停」图标光标 */
#myVideo.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='%23F44336'/%3E%3Crect x='14' y='4' width='4' height='16' fill='%23F44336'/%3E%3C/svg%3E"), auto;
}

/* 可选：提升交互反馈（如边框颜色变化） */
#myVideo.playing {
  outline: 2px solid #2196F3;
}

? 提示：此处使用内联 SVG Base64 编码（已 URL 编码），避免额外 HTTP 请求；你也可替换为本地 PNG 路径（如 url('./cursor-play.png'), auto）。务必保留 , auto 作为回退光标，确保兼容性。

✅ 补充：实时检测播放状态（用于调试或逻辑扩展）

function isVideoPlaying() {
  return !video.paused && !video.ended && video.readyState > 2;
}

// 示例：控制台输出当前状态
setInterval(() => {
  console.log(`Video playing: ${isVideoPlaying()}`);
}, 1000);

该函数比单纯检查 !video.paused 更严谨，排除了视频未加载完成（readyState