如何根据视频播放状态切换悬停光标样式？

DevOps 小满

2026-7-15

解决方案：根据视频播放状态切换自定义光标

方案一：CSS + 状态类（推荐，实现结构与样式分离）

通过给视频容器（或<video>元素本身）添加状态类，用CSS类来控制不同状态下的光标样式。

编写CSS规则：

/* 视频暂停时，显示播放样式光标 */
.video-player {
  cursor: url('data:image/png;base64,[你的播放图标base64编码]'), auto;
}

/* 视频播放时，显示暂停样式光标 */
.video-player.is-playing {
  cursor: url('data:image/png;base64,[你的暂停图标base64编码]'), auto;
}

用JavaScript控制状态类的切换：

const video = document.querySelector('.video-player');

// 视频开始播放时添加状态类
video.addEventListener('play', () => {
  video.classList.add('is-playing');
});

// 视频暂停时移除状态类
video.addEventListener('pause', () => {
  video.classList.remove('is-playing');
});

方案二：直接用JavaScript修改cursor属性

如果不想额外添加CSS类，也可以直接在事件触发时修改元素的style.cursor属性：

const video = document.querySelector('.video-player');
// 提前定义好两个状态的光标URL
const playCursor = 'url("data:image/png;base64,[播放图标base64编码]"), auto';
const pauseCursor = 'url("data:image/png;base64,[暂停图标base64编码]"), auto';

video.addEventListener('play', () => {
  video.style.cursor = pauseCursor;
});

video.addEventListener('pause', () => {
  video.style.cursor = playCursor;
});