亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 javascript 中阻止 esc 關閉我的全屏視頻?

如何在 javascript 中阻止 esc 關閉我的全屏視頻?

當年話下 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

要了解其他?代碼何時打開和關閉全屏模式,您應該fullscreenchangeDocument.?fullscreenchange例如,當用戶手動切換全屏模式,或者當用戶切換應用程序時,導致應用程序暫時退出全屏模式,傾聽并注意也很重要。

document.addEventListener('fullscreenchange',?(event)?=>?{
??video.classList.toggle('video-fullscreen',?document.fullscreenElement?!=?null);
});

但是,您可能根本不需要這個。只需在 CSS 中.video-fullscreen使用:fullscreen選擇器即可,而不是使用類!


查看完整回答
反對 回復 2023-07-14
?
拉風的咖菲貓

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;

   }

});


查看完整回答
反對 回復 2023-07-14
  • 2 回答
  • 0 關注
  • 364 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號