How to detect esc keyup/keydown event when video is in fullscreen mode?

Question

0.00/5 (No votes)

See more:

in current scenario I'm getting esc keyevent when my page is in normal state.

I'm having one video on my page which can be goes in fullscreen mode. one can exit the fullscreen mode by clicking button to go to smallscreen mode or by pressing esc key.

Button click event is working fine, Keyup/Keydown event is not getting fired while video is in full screen and I pressed esc key,although video is going out to its normal state from fullscreen mode.

below is my code.

What I have tried:

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

I am not getting what is wrong and why this event is not triggering when video is in fullscreen mode and I am pressing esc key?

Posted 18-Oct-17 1:06am

Sachin Makwana

Updated 18-Oct-17 2:03am

v2

Add a Solution

Comments

Kornfeld Eliyahu Peter 18-Oct-17 7:15am

What element your video is? And how it goes to full-screen?
(in any case using keypress for Esc is not advised: https://developer.mozilla.org/en-US/docs/Web/Events/keypress)

Sachin Makwana 18-Oct-17 7:22am

its html5 video element and it goes fullscreen by triggering $("#video).requestFullscreen(), $("#video).mozRequestFullscreen() or $("#video).webkitRequestFullscreen().
I'm not using keypress event for esc. It was mentioned in the question earlier but I've corrected it now.

Kornfeld Eliyahu Peter 18-Oct-17 7:26am

I think that when video goes full screen it forgets to bubble events (which is a bug)... Try to bind the same even handler both to the document and to the video tag...

Kornfeld Eliyahu Peter 18-Oct-17 7:38am

I created a small sample and what I see is that Esc key is captured by the browser itself when you are in full screen mode as it is defined as the key to bring you out of that mode, so the click of that key is not delegated to the page but consumed by the browser... I saw the same for F11 in Chrome: first press captured by page then bubbled to the browser and browser went to full-screen; second press brought back the browser from full screen mode but the event never hit the page...
It means you have a problem... Can you explain why you want to know Esc key? maybe there is an other solution...

Sachin Makwana 18-Oct-17 7:43am

Actually I have to hide some controls when video is not in full screen mode. It is working fine is user is clicking a button provided to go to small screen. But if he presses Esc button then video goes in small screen mode but controls are not hiding. I also tried the same. It is working if browser is in fullscreen mode. It is not working for video's full screen mode.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Accepted Answer · 2017-10-18T02:03:00

Based on the comments I conclude that you are interested in knowing when video goes to full-screen and when leaves it (Esc was just a tool to check it)
here some code:

HTML

<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>

And a bit for late-night reading: Fullscreen API - Web APIs | MDN[^]