单击/点击全屏 html5 视频以退出全屏答案

【问题标题】：Click/tap fullscreen html5 video to exit fullscreen单击/点击全屏 html5 视频以退出全屏
【发布时间】：2022-01-01 15:45:56
【问题描述】：

目标

我有一个视频设置，当在移动设备上点击页面上的链接时会全屏播放。这很好用。
我通过 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();
  }

}

【问题讨论】：

标签： javascript html jquery google-chrome video

【解决方案1】：

结合这篇文章和它下面的一些 cmets 解决了这个问题：

How to detect when a page exits fullscreen?

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();
    }
}

【讨论】：