如何阻止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

您不应该试图拦截转义键，并由此派生出您的全屏模式的含义。相反，您可以使用should listen for fullscreenchange events --如果requestFullscreen失败，它也不会触发：

要了解其他代码打开或关闭全屏模式时，应该在

上为fullscreenchange event建立侦听器。同样重要的是，当用户手动切换全屏模式或用户切换应用程序时，fullscreenchange要知道何时会导致应用程序暂时退出全屏模式。

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

然而，你可能根本不需要这个。不要使用.video-fullscreen类，只需在CSS中使用:fullscreen selector！

Answer 2

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

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