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 将取消 fullscreen，但在内部文档中调用它不会.

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 退出视频全屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！