Sachin Makwana Ответов: 1

Как обнаружить событие esc keyup/keydown, когда видео находится в полноэкранном режиме?


в текущем сценарии я получаю esc keyevent, когда моя страница находится в нормальном состоянии.

У меня есть одно видео на моей странице, которое можно посмотреть в полноэкранном режиме. можно выйти из полноэкранного режима, нажав кнопку, чтобы перейти в режим малого экрана, или нажав кнопку esc ключ.

Событие нажатия кнопки работает нормально,событие Keyup/Keydown не срабатывает, пока видео находится в полноэкранном режиме, и я нажал клавишу esc, хотя видео выходит в нормальное состояние из полноэкранного режима.

ниже приведен мой код.

Что я уже пробовал:

$(document).bind('keyup', function (e) {
       alert(e.keyCode);
   });


Я не понимаю, что не так и почему это событие не срабатывает, когда видео находится в полноэкранном режиме и я нажимаю клавишу esc?

Kornfeld Eliyahu Peter

Каким элементом является ваше видео? А как он переходит в полноэкранный режим?
(в любом случае использование нажатия клавиши Esc не рекомендуется: https://developer.mozilla.org/en-US/docs/Web/Events/keypress)

Sachin Makwana

его видеоэлемент html5 и он переходит в полноэкранный режим, вызывая $("#video). requestFullscreen (), $("#video). mozRequestFullscreen () или $("#video).webkitRequestFullscreen ().
Я не использую событие нажатия клавиши для esc. Это было упомянуто в вопросе ранее, но теперь я исправил его.

Kornfeld Eliyahu Peter

Я думаю, что когда видео идет на весь экран, оно забывает пузырить события (что является ошибкой)... Попробуйте привязать один и тот же четный обработчик как к документу, так и к тегу видео...

Kornfeld Eliyahu Peter

Я создал небольшой образец, и я вижу, что клавиша Esc захватывается самим браузером, когда вы находитесь в полноэкранном режиме, поскольку она определена как клавиша, чтобы вывести вас из этого режима, поэтому щелчок этой клавиши не делегируется странице, а потребляется браузером... Я видел то же самое для F11 в Chrome: первое нажатие захватывается страницей, затем пузырится в браузере, и браузер переходит в полноэкранный режим; второе нажатие возвращает браузер из полноэкранного режима, но событие никогда не попадает на страницу...
Это значит, что у вас есть проблема... Можете ли вы объяснить, почему вы хотите знать ключ Esc? может быть, есть и другое решение...

Sachin Makwana

На самом деле мне приходится скрывать некоторые элементы управления, когда видео не находится в полноэкранном режиме. Он работает нормально, если пользователь нажимает кнопку, предназначенную для перехода на маленький экран. Но если он нажимает кнопку Esc, то видео переходит в режим малого экрана, но элементы управления не скрываются. Я тоже попробовал то же самое. Он работает, если браузер находится в полноэкранном режиме. Он не работает в полноэкранном режиме видео.

1 Ответов

Рейтинг:
7

Kornfeld Eliyahu Peter

Основываясь на комментариях, я делаю вывод, что вам интересно знать, когда видео переходит в полноэкранный режим, а когда покидает его (Esc был просто инструментом для его проверки)
вот какой-то код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<video width="480" controls poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
  <source src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm" type="video/webm">
  Your browser doesn't support HTML5 video tag.
</video>
<script>
$(document).bind('fullscreenchange webkitfullscreenchange mozfullscreenchange msfullscreenchange', function (e) {
	var fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement || document.msFullscreenElement;
	
	if (!fullscreenElement) {
		console.log('Leaving full-screen mode...');
	} else {
		console.log('Entering full-screen mode...');
	}
});
</script>

И немного для позднего чтения: Полноэкранный API-Web API | MDN[^]


Sachin Makwana

Спасибо, это сработало для меня.

Karthik_Mahalingam

5

Kornfeld Eliyahu Peter

Добро пожаловать!

Kornfeld Eliyahu Peter

Спасибо!