Click here to Skip to main content
15,076,991 members
Please Sign up or sign in to vote.
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
Updated 18-Oct-17 2:03am
v2
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

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[^]
   
Comments
Sachin Makwana 18-Oct-17 8:13am
   
Thanks, It worked for me.
Kornfeld Eliyahu Peter 18-Oct-17 8:24am
   
Welcome!
Karthik_Mahalingam 18-Oct-17 8:23am
   
5
Kornfeld Eliyahu Peter 18-Oct-17 8:24am
   
Thank you!

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900