Javascript 带有自定义控件的HTML5视频播放器：使用[ESC]退出全屏

我正在制作一个带有自定义控件的HTML5视频播放器。您可以在JSFIDLE中看到它

HTML是“经典的”：

我有一个全屏功能，可以调用两个事件：单击全屏按钮并按Esc键

单击全屏按钮可切换全屏模式ok，但我不明白为什么不使用该键。毕竟，这是同样的功能

---

有什么提示吗？泰

既然我了解了您的目标，您就不能在全屏模式下收听按键事件，因为存在安全风险，有很多方法可以在Chrome中实现这一点，但我强烈建议不要这样做

您可以做的是，您可以收听

webkitfullscreenchange mozfullscreenchange fullscreenchange

事件（出于浏览器兼容性的原因，多个事件）

然后在这些事件发生时采取行动

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
   if(event === 'FullscreenOff') {
    // Do something when user exists fullscreen
   } else {
    // Do something when user enters fullscreen
   }
});

---

fiddle在Chrome上工作，你在使用哪个浏览器？嗯，它在我的本地环境下不工作。我必须按ESC键两次才能退出全屏。你能把它保存在你的电脑上并告诉我它是如何工作的吗？和。。我也使用Chrome。只是问一个问题，为什么你想在按下ESC键时打开全屏，从用户体验的角度来看，这对我来说没有任何意义。对不起，我不够明确（和聪明）：我只想通过按下“ESC”键退出全屏。这不是浏览器中的默认功能吗？

$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
   if(event === 'FullscreenOff') {
    // Do something when user exists fullscreen
   } else {
    // Do something when user enters fullscreen
   }
});