Full Screen Controller does not autohide

[mastermach50]

While in full-screen the video-controls-container does not hide itself as long as mouse is on the screen(moving mouse to second display hides the controls, this is not possible in single display devices).

[burgil]

I came up with a solution that works very good for auto hiding the controls (and the mouse) just like the original!

Add the code below and remove the css snippet, and it should work out of the box

Features:

• Works no matter if you have a single display or multiple
• Feels exactly like the original, very good
• Auto hides the controls and the mouse after 3 seconds of inactivity, only when the player is playing
• When the player is paused or finished playing, the controls and mouse will show back up again
• Supports both full screen and non full screen modes - the mouse only hides if it's on the video in non full screen mode, but the controls still hide properly after 3 seconds of playback and stay hidden when you move around other elements in the screen without hiding the mouse in non full screen mode, just like the original, no bugs or glitches
• When you hover the controls, they won't hide - just like the original
• When the mouse moves, everything shows again
• Debounced/reset on frequent moves
• Controls and mouse only hide when the video is actually playing
• Recently added support for mobile and touch screens - controls will show on touch events
• Uses the built in system for fading in and out the controls, which is why it's important to remove the css hover effect mentioned below
• Tested and fixed many bugs already, can't find any more, it's just perfect

Remove that CSS:

.video-container:hover .video-controls-container,
.video-container:focus-within .video-controls-container,
.video-container.paused .video-controls-container {
  opacity: 1;
}

JS:

const videoControlsContainer = document.querySelector(".video-controls-container");
videoControlsContainer.style.opacity = '1';
let hideControlsTimer;

function clearControlsTimer() {
  if (hideControlsTimer) {
    clearTimeout(hideControlsTimer);
    hideControlsTimer = undefined;
  }
}

function hideControls() {
  clearControlsTimer();
  if (!video.paused) {
    hideControlsTimer = setTimeout(() => {
      if (!video.paused) {
        videoControlsContainer.style.opacity = '0';
        videoControlsContainer.style.pointerEvents = 'none';
        video.style.cursor = 'none';
      }
    }, 3000);
  }
}

function showControls() {
  videoControlsContainer.style.opacity = '1';
  videoControlsContainer.style.pointerEvents = '';
  video.style.cursor = '';
  hideControls();
}

video.addEventListener("mousemove", () => showControls());
video.addEventListener("pause", () => showControls())
video.addEventListener("play", () => hideControls())
video.addEventListener("ended", () => showControls())
video.addEventListener("touchstart", () => showControls());
videoControlsContainer.addEventListener("mouseleave", () => showControls());
videoControlsContainer.addEventListener("mouseenter", () => clearControlsTimer());
videoControlsContainer.addEventListener("mousemove", () => clearControlsTimer());

this assumes the script is deferred at the top of the page or loaded at the bottom of the page, so it can find the .video-controls-container without needing an onload wrapper

Room for improvement:

• accessibility - when the user doesn't have a mouse and uses tab to navigate the controls, they shouldn't disappear. right now, the user would have to pause the video to see them. maybe we could detect when tab is pressed and show the controls for longer, like 5-6 seconds.

• optimization - mousemove might be firing too fast. ideally, we'd track whether the controls are already visible to avoid redundant updates. i thought about adding a flag, but with so many events affecting control visibility, it might go out of sync. since it's running smoothly as-is, i think it's worth keeping simple for now. still, we should check if those extra calls impact fps - basically just those few lines inside showControls() running fast during mouse movement.