javascript – HTML5退出视频全屏

您只能在document.mozCancelFullScreen()中调用,如果您位于全屏文档中.也就是说,如果你是一个包含在另一个文档中的全屏幕,那么mozCancelFullScreen()将不会在内部iframe中执行任何操作,因为只有外部文档是全屏幕的.即在外部文档中调用mozCancelFullScreen将取消全屏,但是在内部文档中调用它将不会.

还要注意,mozCancelFullScreen()将全屏复原,将以前的全屏元素全屏显示.所以如果你多次请求全屏,取消全屏将不一定完全退出全屏幕,它可能会回滚到以前的全屏状态.

例子：

你可以去：

$(document).on('webkitExitFullScreen',function()      {       
  alert("Full Screen Closed"); 
});

你可以使用一个变量进一步的用法：

var exitedFullScreen;
$(document).on("webkitExitFullScreen",function() {
   exitedFullScreen = !!$(document).fullScreen();
}

3.将其应用于容器：

$('video')[0].webkitExitFullScreen();

4.仅使用JavaScript：

<script type="text/javascript">
  function ExitVideo() {
      document.getElementsByTagName('video')[0].webkitExitFullScreen();
  }
</script>

还有几个第三方插件可以让您访问所需的事件：

> http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
> https://github.com/ruidlopes/jquery-fullscreen

编辑1

浏览器之间存在兼容性问题,以下是不同语句的示例：

document.webkitExitFullscreen();
document.mozCancelFullscreen();
document.exitFullscreen();

编辑2

全屏API在Chrome 15,Firefox 14和Opera 12中默认启用.有关其余API的更多信息,请参阅规范.

编辑3

尝试以下操作,而不使用jQuery在Firefox中进行调试：

var videoElement = document.getElementById("myvideo");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozrequestFullScreen) {
        videoElement.mozrequestFullScreen();
      } else {
        videoElement.webkitrequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("keydown",function(E) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  },falsE);

编辑4

要在Firefox中使用jQuery,请尝试不同的示例：

if (document.mozCancelFullScreen) { 
    alert('Full Screen Closed') 
}