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

Question

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

我只是想让它成为更好的体验，当有人鼠标在播放视频（例如 YouTube）上空闲（一定时间）时，光标会消失暂时并且*返回如果用户移动his/her鼠标。

以及我在下面所知道的一些知识为自己尝试过的东西

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>

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

EDIT: The problem was a syntax error as Dick Larsson pointed out

And yes thank you Ali Kianoor and D. Seah, those were good answers as well. And worked really well. and don't worry ALL were sweet and simple answers Ali Kianoor keep up the simple yet efficient code... and of course another thanks to D. Seah thats a good one... for i would never thought to all that, yet simple. Thank You!

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

Answer 1

您可以简单地使用 CSS class 就像我为您制作的这个 'hideCursor'。

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%;
}

.hideCursor {cursor: none;}

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

Answer 2

不要使用“恒等运算符”=== 来赋值。

document.body.style.cursor === "none"

您应该像这样分配值“none”

document.body.style.cursor = "none"

同理 document.body.style.cursor === "默认";

Answer 3

我觉得这样比较好。 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");
});

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

How to hide the cursor when its idle and hovering over a playing video?

html

javascript

html5-video