Click/tap 全屏 html5 视频退出全屏

Question

目标

我有一个视频设置，当在移动设备上点击页面上的 link 时全屏播放。这很好用。
我通过 CSS 隐藏了 HTML5 视频控件 - 我希望视频是完全干净，没有任何控制。
我希望能够通过再次点击全屏视频本身来关闭全屏视频。
我还需要能够向正文添加 class 并在关闭时暂停视频。添加 class 的原因是我想显示和隐藏视频本身，因此添加 class 让我可以控制整个页面的 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();
  }

}

Answer 1

结合使用 post 和下面的一些评论解决了这个问题：

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

Click/tap 全屏 html5 视频退出全屏

Click/tap fullscreen html5 video to exit fullscreen

html

javascript

video

jquery

google-chrome

目标

问题

代码