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

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

您不应该尝试拦截转义按键并从中得出对全屏模式的影响。相反，您应该监听fullscreenchange事件- 如果失败也不会触发requestFullscreen：要了解其他 代码何时打开和关闭全屏模式，您应该fullscreenchange在Document. fullscreenchange例如，当用户手动切换全屏模式，或者当用户切换应用程序时，导致应用程序暂时退出全屏模式，倾听并注意也很重要。document.addEventListener('fullscreenchange', (event) => {   video.classList.toggle('video-fullscreen', document.fullscreenElement != null); });但是，您可能根本不需要这个。只需在 CSS 中.video-fullscreen使用:fullscreen选择器即可，而不是使用类！

Answer 2

尝试将removeClass方法添加到您的事件侦听器回调函数中。//detect Escape key presswindow.addEventListener("keydown", (e) => {    if(e.key === "Escape" && fullscreen){        e.preventDefault();        video.classList.remove('video-fullscreen');                closeFullscreen();        fullscreen = !fullscreen;   }});