當年話下
2023-07-14 15:47:30
目前正在開發一個視頻播放器,如果視頻是全屏的,則添加特定的樣式類。如果用戶使用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 fullscreenfunction toggleFullScreen(){ !fullscreen ? openFullscreen(player) : closeFullscreen(); fullscreen = !fullscreen;}我嘗試了esc按鈕的事件監聽器,這樣我就可以用它來改變樣式,第一個 esc 按下關閉,第二個按下我的代碼,非常煩人://detect Escape key presswindow.addEventListener("keydown", (e) => { if(e.key === "Escape" && fullscreen){ e.preventDefault(); closeFullscreen(); fullscreen = !fullscreen; }});
2 回答

暮色呼如
TA貢獻1853條經驗 獲得超9個贊
您不應該嘗試攔截轉義按鍵并從中得出對全屏模式的影響。相反,您應該監聽fullscreenchange
事件- 如果失敗也不會觸發requestFullscreen
:
要了解其他?代碼何時打開和關閉全屏模式,您應該
fullscreenchange
在Document
.?fullscreenchange
例如,當用戶手動切換全屏模式,或者當用戶切換應用程序時,導致應用程序暫時退出全屏模式,傾聽并注意也很重要。
document.addEventListener('fullscreenchange',?(event)?=>?{ ??video.classList.toggle('video-fullscreen',?document.fullscreenElement?!=?null); });
但是,您可能根本不需要這個。只需在 CSS 中.video-fullscreen
使用:fullscreen
選擇器即可,而不是使用類!

拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
嘗試將removeClass方法添加到您的事件偵聽器回調函數中。
//detect Escape key press
window.addEventListener("keydown", (e) => {
if(e.key === "Escape" && fullscreen){
e.preventDefault();
video.classList.remove('video-fullscreen');
closeFullscreen();
fullscreen = !fullscreen;
}
});
添加回答
舉報
0/150
提交
取消