HTML5 退出视频全屏

You can only call document.mozCancelFullScreen(), if you’re inside a document which is fullscreen. i.e. if you’re in an which is a contained inside another document, which is fullscreen, mozCancelFullScreen() won’t do anything in the inner iframe, as only the outer document is acutally fullscreen. i.e. calling mozCancelFullScreen in the outer document will cancel fullscreen, but calling it in the inner document won’t.

另请注意，mozCancelFullScreen() 将 fullscreen 恢复为将前一个 fullscreen 元素设为 fullscreen.因此，如果您多次请求fullscreen，取消fullscreen 不一定完全退出fullscreen，它可能会回滚到之前的全屏状态.

Also be aware that mozCancelFullScreen() reverts fullscreen to have the previous fullscreen element as fullscreen. So if you’ve requested fullscreen multiple times, cancelling fullscreen won’t necessarily exit fullscreen fully, it may rollback to the previous fullscreen state.

示例:

1. 你可以选择:

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

2. 您可以使用一个变量来进一步使用:

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>

5. 还有一些第三方插件可以让您访问您需要的活动:

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

编辑 1

存在跨浏览器的兼容性问题，以下是不同语句的示例:

There are compatibility issue across browsers, here is the example of different statements:

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

编辑 2

全屏 API 在 Chrome 15、Firefox 14 和 Opera 12 中默认启用.如需详细了解 API 的其余部分，请参阅规范.

EDIT 2

The Fullscreen API is enabled by default in Chrome 15, Firefox 14, and Opera 12. For more information on the rest of the API, see the spec.

2012 年 10 月 11 日更新:与规范更改保持一致.小写S"在 requestFullscreen() 和更改 document.webkitCancelFullScreen()到 document.webkitExitFullscreen().

Updated 2012-10-11: to be inline with spec changes. Lowercased the "S" in requestFullscreen() and changed document.webkitCancelFullScreen() to document.webkitExitFullscreen().

编辑 3

尝试以下操作，无需在 Firefox 中使用 jQuery 进行调试:

EDIT 3

Try the following, without using jQuery to debug in 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 一起使用，请尝试不同的示例:

EDIT 4

For using with jQuery in Firefox, try the different example:

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

这篇关于HTML5 退出视频全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，WP2