HTML5自定义控件视频播放器全屏模式下按钮失效求助

Hey there! Let's tackle this fullscreen control issue with your custom HTML5 video player—this is a super common gotcha when building custom media controls, so here are the most likely fixes to get your buttons working again:

1. Make sure your controls are inside the fullscreen target element #

When you trigger fullscreen mode, browsers only render the targeted element and its children in the fullscreen view. If your custom controls are outside the <video> tag or the container you're making fullscreen, they'll be hidden behind the fullscreen layer and unclickable.

Quick fix: Wrap both your video and controls in a single container, then request fullscreen on that container instead of the video alone:

<div class="video-wrapper">
  <video id="my-video" src="your-video.mp4"></video>
  <div class="custom-controls">
    <button id="play-btn">Play/Pause</button>
    <!-- Add other controls here -->
  </div>
</div>

const videoWrapper = document.querySelector('.video-wrapper');
// Trigger fullscreen on the wrapper, not just the video
videoWrapper.requestFullscreen();

2. Adjust z-index and positioning for controls #

Fullscreen mode can mess with stacking contexts. Ensure your controls are positioned correctly relative to the video container and have a high enough z-index to stay on top:

.video-wrapper {
  position: relative; /* Establishes a stacking context */
}

.custom-controls {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  z-index: 10; /* Higher than the video's default stacking order */
  padding: 0 10px;
}

3. Disable browser's default video controls #

If you haven't already, make sure the <video> tag doesn't have the native controls attribute enabled. Native controls can overlay or interfere with your custom ones in fullscreen:

<video id="my-video" src="your-video.mp4" controls="false"></video>

Or remove it dynamically with JS:

const video = document.getElementById('my-video');
video.removeAttribute('controls');

4. Handle fullscreen event state changes #

Some browsers reset element states when entering/exiting fullscreen. Add a listener for the fullscreenchange event to ensure your controls stay visible and functional:

document.addEventListener('fullscreenchange', () => {
  const isFullscreen = document.fullscreenElement !== null;
  const controls = document.querySelector('.custom-controls');
  
  // Force controls to stay visible in fullscreen
  controls.style.display = isFullscreen ? 'flex' : 'flex';
  // Re-bind click events if needed (rare, but can fix edge cases)
  document.getElementById('play-btn').addEventListener('click', togglePlayPause);
});

function togglePlayPause() {
  const video = document.getElementById('my-video');
  video.paused ? video.play() : video.pause();
}

5. Check for pointer-events conflicts #

Double-check your CSS to make sure no parent element of your controls has pointer-events: none set—this would block all clicks. Explicitly enable pointer events on your control buttons if needed:

.custom-controls button {
  pointer-events: auto;
  /* Add other button styles */
}

Start with the first fix (wrapping controls in the fullscreen container)—that's the most frequent cause of this issue. If that doesn't work, work through the other steps one by one.

内容的提问来源于stack exchange，提问作者Eswaran Arumugam