如何解决如何停止Esc关闭我的JavaScript全屏视频?
当前使用的是视频播放器,如果视频为全屏,则该视频播放器会添加特定的样式类。如果用户使用 esc (而不是全屏按钮)退出,则样式保持不变。
/* View in fullscreen */
function openFullscreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
video.classList.add('video-fullscreen');
}
/* Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
video.classList.remove('video-fullscreen');
}
let fullscreen = false;
//Toggle fullscreen
function toggleFullScreen(){
!fullscreen ? openFullscreen(player) : closeFullscreen();
fullscreen = !fullscreen;
}
我尝试了 esc 按钮的事件监听器,因此我可以使用它来更改样式,第一次关闭esc,然后按其次是我的代码,很烦人:
//detect Escape key press
window.addEventListener("keydown",(e) => {
if(e.key === "Escape" && fullscreen){
e.preventDefault();
closeFullscreen();
fullscreen = !fullscreen;
}
});
解决方法
尝试将removeClass方法添加到事件侦听器回调函数中。
//detect Escape key press
window.addEventListener("keydown",(e) => {
if(e.key === "Escape" && fullscreen){
e.preventDefault();
video.classList.remove('video-fullscreen');
closeFullscreen();
fullscreen = !fullscreen;
}
});
,
您不应尝试拦截转义按键并从中得出全屏模式的含义。相反,您使用should listen for fullscreenchange
events-如果requestFullscreen
失败也不会触发:
要了解其他代码何时打开和关闭全屏模式,您可以 应该在
fullscreenchange
event上建立监听器Document
。聆听fullscreenchange
也很重要 注意用户何时手动切换全屏模式, 或当用户切换应用程序时,导致您的应用程序 暂时退出全屏模式。
document.addEventListener('fullscreenchange',(event) => {
video.classList.toggle('video-fullscreen',document.fullscreenElement != null);
});
但是,您可能根本不需要这个。不用.video-fullscreen
类,只需在CSS中使用:fullscreen
selector!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。