CODEWITHSUNDEEP
javascripthtmlhtml5-video
COVID-MINT
COVID-MINT

Reputation: 25

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

I have looked for a type of response here and other places, that may be applicable to solving my problem but all I get is CSS and "no just don't bad user experience"... I don't want to hide the cursor immediately when over a element, or frick with peoples experience.

I just want to make it a better experience for when someone mouse is idle (for certain amount of time) over a playing video (like YouTube for example) the cursor goes away temporarily and *comes back if the user moves his/her mouse.

And what I've tried for my own with some knowledge I know down below

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>

BUT that doesn't work... I don't know what to do now, or how to make it work!

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!

And sorry I like all answers I get, I have been coding three years now(since 2018) but I'm still learning, and all answers are ones I can also learn from!

Upvotes: 1

Views: 3114

Answers (3)

D. Seah
D. Seah

Reputation: 4592

i think it is better to do it in this way. 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");
});

Upvotes: 6

Ali Kianoor
Ali Kianoor

Reputation: 1243

You can simply use a CSS class like this one I made for you '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>

Upvotes: 0

Dick Larsson
Dick Larsson

Reputation: 785

Do not use the "Identity operator" === to assign a value.

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

You should assign the value "none" like this

document.body.style.cursor = "none"

The same goes for document.body.style.cursor === "default";

Upvotes: 2

Related Questions