Как запретить 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

Вы не должны пытаться перехватить нажатие клавиши escape и извлечь из этого последствия для вашего полноэкранного режима. Вместо этого вам следует прислушаться к fullscreenchangeсобытия - которые также не сработают, если requestFullscreen не удается:

Чтобы узнать, когда другой код включает и выключает полноэкранный режим, вы должны установить слушателей для fullscreenchangeмероприятие наDocument. Также важно прислушиваться к fullscreenchange чтобы знать, когда, например, пользователь вручную переключает полноэкранный режим или когда пользователь переключает приложения, заставляя ваше приложение временно выйти из полноэкранного режима.

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

Однако, вероятно, вам это совсем не нужно. Вместо .video-fullscreen класс, просто используйте :fullscreenселектор в вашем CSS!

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;
   }
});