如何在视频处于全屏模式时检测esc keyup / keydown事件？ [英] How to detect esc keyup/keydown event when video is in fullscreen mode?

问题描述

在当前场景中，当我的页面处于正常状态时，我正在获取esc keyevent。



我的页面上有一个视频可以进入全屏模式。可以通过单击按钮进入小屏模式或按 esc 键退出全屏模式。



按钮点击事件正常， Keyup / Keydown事件在视频全屏显示时没有被触发，我按esc键，虽然视频从全屏模式进入正常状态。



以下是我的代码。



我尝试过：

 $（document）.bind（'keyup'，function（e）{
 alert（e.keyCode）; 
}）; 
 

我没有得到错误以及为什么当视频处于全屏模式时此事件未触发我按esc键？

解决方案

（文件）.bind（'keyup'，function（e）{
alert（e .keyCode）;
}）;

我没有得到错误以及为什么当视频处于全屏模式时此事件未触发我按esc键？

根据评论，我得出结论，你有兴趣了解视频何时进入全屏，何时离开（Esc只是一个检查它的工具）

这里有一些代码：

 <  < span class =code-leadattribute> script     src   =  https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js < span class =code-keyword>>  <   /   script  >  
 <   video     width   =  480    controls    < span class =code-attribute> poster   =  https://archive.org/download/ WebmVp8Vorbis / webmvp8.gif   >  
 <   source     src   =  https://archive.org/download/WebmVp8Vorbis/webmvp8.webm    type   =  video / webm >  
您的浏览器不支持HTML5视频标记。 
 <   / video  >  
 <   script  >  

（ document ）。bind（' < span class =code-string> fullscreenchange webkitfullscreenchange mozfullscreenchange msfullscreenchange'， function （e）{
var fullscreenElement = document .fullscreenElement || document .webkitFullscreenElement || document .mozFullscreenElement || document .msFullscreenElement;

if （！fullscreenElement）{
console .log（' 离开全屏模式......'）;
} else {
console .log（' 进入全屏模式......'）;
}
}）;
< / script >

还有一些深夜阅读：全屏API - Web API | MDN [ ^ ]

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?

解决方案

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

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:

<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[^]

这篇关于如何在视频处于全屏模式时检测esc keyup / keydown事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！