如何阻止 esc 关闭我在 javascript 中的全屏视频？

Question

目前正在开发 视频播放器，如果视频是全屏。如果用户使用 esc 而不是全屏按钮退出，则样式保持不变。

/* View in fullscreen */
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }

  video.classList.add('video-fullscreen');
}

/* Close fullscreen */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }

  video.classList.remove('video-fullscreen');
}

let fullscreen = false;

//Toggle fullscreen
function toggleFullScreen(){
    !fullscreen ? openFullscreen(player) : closeFullscreen();
    fullscreen = !fullscreen;
}

我为 esc 按钮尝试了一个 事件监听器，这样我就可以用它来 改回样式，第一次按 esc 关闭，第二次按我的代码，很烦人：

//detect Escape key press
window.addEventListener("keydown", (e) => {
    if(e.key === "Escape" && fullscreen){
        e.preventDefault();
        closeFullscreen();
        fullscreen = !fullscreen;
   }
});

Answer 1

尝试将 removeClass 方法添加到您的事件侦听器回调函数中。

//detect Escape key press
window.addEventListener("keydown", (e) => {
    if(e.key === "Escape" && fullscreen){
        e.preventDefault();
        video.classList.remove('video-fullscreen');        
        closeFullscreen();
        fullscreen = !fullscreen;
   }
});

Answer 2

您不应该试图拦截转义键并从中得出对您的全屏模式的影响。相反，你 should listen for fullscreenchange events - 如果 requestFullscreen 失败也不会触发：

To learn when other code has toggled full-screen mode on and off, you should establish listeners for the fullscreenchange event on the Document. It's also important to listen for fullscreenchange to be aware when, for example, the user manually toggles full-screen mode, or when the user switches applications, causing your application to temporarily exit full-screen mode.

document.addEventListener('fullscreenchange', (event) => {
  video.classList.toggle('video-fullscreen', document.fullscreenElement != null);
});

但是，您可能根本不需要它。而不是 .video-fullscreen class，只需在 CSS!

中使用 :fullscreen selector

如何阻止 esc 关闭我在 javascript 中的全屏视频？

How to stop esc from closing my fullscreen video in javascript?

javascript

css

escaping

keydown

fullscreenchange