HTML5退出视频全屏 [英] HTML5 exiting video fullscreen

问题描述

我在正常屏幕上有自定义控件的 HTML5 视频。
全屏没有自定义控件。
我只是全屏显示默认控件。
但是当退出全屏时我需要禁用默认控件。
我们如何知道视频是否已使用JavaScript或jQuery退出全屏模式？

I have a HTML5 video with custom controls in normal screen. Don't have custom controls at full screen. I just show default controls at full screen. But when exiting full screen I need to disable default controls. How do we know whether the video has exited the full screen mode using JavaScript or jQuery?

推荐答案

你只能如果您在全屏的文档中，请调用 document.mozCancelFullScreen（）。即如果你在另一个文档中包含哪个全屏，mozCancelFullScreen（）将不会在内部iframe中执行任何操作，因为只有外部文档是全屏。即在外部文档中调用 mozCancelFullScreen 将取消全屏，但在内部文档中调用它不会。

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（）还原全屏以使之前的全屏元素为全屏。因此，如果您多次请求全屏，则取消全屏并不一定完全退出全屏，它可能会回滚到之前的全屏状态。

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

• 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：与规范更改内联。在requestFullscreen（）中降低了S
并将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

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

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

用于jQuery在Firefox中，尝试不同的示例：

EDIT 4

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

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

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