光标自定义图像无法正确显示

Question

将鼠标悬停在视频元素上时，自定义光标图像出现问题。

HTML

<video id="videoPlayer">
  <source src="video/sanaa-faizal.mp4" type="video/mp4">
  <source src="video/sanaa-faizal.ogg" type="video/ogg">
</video>

SCRIPT

<script>
  var videoPlayer = document.getElementById('videoPlayer');
  // Auto play, half volume.
  videoPlayer.volume = 1;
  // Play / pause.
  videoPlayer.addEventListener('click', function () {
    if (videoPlayer.paused == false) {
      videoPlayer.pause();
      videoPlayer.firstChild.nodeValue = 'Play';
    } else {
      videoPlayer.play();
      videoPlayer.firstChild.nodeValue = 'Pause';
    }
  });
</script>

CSS

video {
  max-width: 100%;
  height: auto;
  cursor: url(../img/icon-play.png), auto;
}

现在，只有移动光标时，自定义光标图像才会在视频元素上正确显示。一旦你停止移动光标，它就会恢复默认状态。有没有人知道如何解决这个问题？