目標
- 我有一個視頻設定，當在移動設備上點擊頁面上的鏈接時，它會全屏播放。這作業正常。
- 我通過 CSS 隱藏了 HTML5 視頻控制元件 - 我希望視頻完全干凈，沒有任何控制元件。
- 我希望能夠通過再次點擊全屏視頻本身來關閉全屏視頻。
- 我還需要能夠向正文添加一個類并在關閉時暫停視頻。添加類的原因是我想顯示和隱藏視頻本身，因此添加類可以讓我控制整個頁面的css作為狀態更改。
問題
esc例如，當我點擊或回傳 Android 手機時，它顯然不會運行該功能。
如何檢測何時退出全屏以運行我想要的任何功能？
代碼
videoSmallTrigger.on('click', function() {
// Activate
if (!document.isFullScreen && !document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) {
console.log('trigger open');
launchFullscreen(videoSmallID);
body.addClass('fullscreen-video-sm');
videoSmall.get(0).play();
}
// Deactivate
else {
console.log('trigger close');
exitFullscreen();
body.removeClass('fullscreen-video-sm');
videoSmall.get(0).pause();
}
});
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
uj5u.com熱心網友回復：
結合使用這篇文章和它下面的一些評論來解決它：
如何檢測頁面何時退出全屏？
if (document.addEventListener) {
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);
document.addEventListener('webkitfullscreenchange', exitHandler, false);
}
function exitHandler() {
if (!document.isFullScreen && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
// Code to run when you exit fullscreen by hitting the ESC key etc.
body.removeClass('fullscreen-video-sm');
videoSmall.get(0).pause();
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/405812.html
標籤：