如何在光标空闲并悬停在正在播放的视频上时隐藏光标？

Question

我在这里和其他地方寻找了一种可能适用于解决我的问题的响应类型，但我得到的只是 CSS 和“不，只是不要糟糕的用户体验”......我不想隐藏光标当超过一个元素时立即，或者用人们的经验开玩笑。

我只是想让它成为一种更好的体验，当有人鼠标在播放视频（例如 YouTube）上闲置（一段时间）时，光标会暂时消失，如果用户移动他/她的鼠标，则光标会回来。

以及我自己尝试过的一些知识，我在下面知道

let vidod = document.getElementById("vidof");

vidod.addEventListener("mouseover", e => {
    setTimeout(function() {
        document.body.style.cursor = "none";
        window.addEventListener("mousemove", et => {
            document.body.style.cursor = "default";
        });
    }, 3500);
});

video {
  width: 55%;
  height: 55%;
}

<video id="vidof" autoplay>
  <source type="video/mp4" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
</video>

但这不起作用......我不知道现在该怎么做，或者如何让它发挥作用！

编辑：正如迪克·拉尔森（Dick Larsson）指出的那样，问题是语法错误

是的，谢谢Ali Kianoor和D. Seah，这些也是很好的答案。并且效果非常好。别担心，所有的答案都是甜蜜而简单的，Ali Kianoor保持了简单而高效的代码……当然，还要感谢D. Seah，这是一个很好的答案……因为我从来没有想过所有这些，但很简单。谢谢你！

抱歉，我喜欢得到的所有答案，我已经编码三年了（自 2018 年以来），但我仍在学习，所有答案都是我也可以学习的答案！

Answer 1

我认为这样做比较好。https://jsfiddle.net/56emzjws/3/

const vidod = document.getElementById("vidof");

vidod.addEventListener("mousemove", e => {
  // clear the timer if it is set when the mouse move
  const timer = vidod.getAttribute("timer");
  if (timer) {
    clearTimeout(timer);
    vidod.setAttribute("timer", "");
  }

  # set timeout to wait of idle time
  const t = setTimeout(() => {
    vidod.setAttribute("timer", "");
    vidod.classList.add("hide-cursor");
  }, 3500);
  vidod.setAttribute("timer", t);

  vidod.classList.remove("hide-cursor");
});