如何用JavaScript/JQuery检测视频退出全屏并停止播放

Got it, let's fix this up for you. You've already got the fullscreen play logic working—now we just need to add event listeners to catch when the user exits fullscreen, then trigger the video to stop playing.

Step 1: Listen for Fullscreen Change Events #

Different browsers use slightly different event names for fullscreen state changes, so we'll attach listeners to all of them to ensure cross-browser support:

• fullscreenchange (standard W3C event)
• webkitfullscreenchange (Chrome, Safari, Edge)
• mozfullscreenchange (Firefox)
• MSFullscreenChange (Legacy Edge/IE)

Step 2: Verify Exit from Fullscreen #

In the event handler, we'll check browser-specific properties to see if any element is currently in fullscreen. If none of these properties return an element (i.e., they're null), that means we've exited fullscreen mode.

Step 3: Stop the Video #

Once we confirm the exit, we'll call the video's pause() method. Optionally, you can reset the video to its starting position with currentTime = 0 if that's the behavior you want.

Full Integrated Code Example #

Here's how to merge this logic with your existing code:

<!-- Your existing video element -->
<video controls id="myvideo">
  <source src="/videoPlays.mp4" type="video/mp4">
</video>

<!-- Your trigger button -->
<button id="BtnPlayVideo">Play Fullscreen</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// Your existing fullscreen play function (cleaned up a bit)
$("#BtnPlayVideo").click(VideoPlay);
function VideoPlay() {
  var elem = document.getElementById("myvideo");
  
  // Trigger fullscreen based on browser support
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
  
  // Play the video once fullscreen is initiated
  elem.play();
}

// Handle fullscreen exit detection
function handleFullscreenStateChange() {
  // Check if any element is in fullscreen across browsers
  var activeFullscreenElem = document.fullscreenElement || 
                             document.webkitFullscreenElement || 
                             document.mozFullScreenElement || 
                             document.msFullscreenElement;
  
  // If no element is fullscreen, we've exited
  if (!activeFullscreenElem) {
    var video = document.getElementById("myvideo");
    video.pause();
    // Optional: Reset video to start position
    // video.currentTime = 0;
  }
}

// Attach listeners for all browser-specific events
document.addEventListener("fullscreenchange", handleFullscreenStateChange);
document.addEventListener("webkitfullscreenchange", handleFullscreenStateChange);
document.addEventListener("mozfullscreenchange", handleFullscreenStateChange);
document.addEventListener("MSFullscreenChange", handleFullscreenStateChange);
</script>

Key Details #

• The fullscreenchange event fires both when entering and exiting fullscreen—our check for !activeFullscreenElem ensures we only act when the user exits.
• We cleaned up your original VideoPlay function to avoid repeating the play() call four times, making the code more maintainable.
• The optional currentTime = 0 line resets the video to its start when exiting fullscreen; remove it if you want the video to stay paused at its current position.

内容的提问来源于stack exchange，提问作者Marcos Schmell