javascript - HTML5 退出视频全屏

Question

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

Answer 1

如果您在 全屏 的文档中，您只能调用 document.mozCancelFullScreen()。也就是说，如果您所在的文件包含在另一个文档中，该文档是全屏，则 mozCancelFullScreen() 不会在内部 iframe 中执行任何操作，因为实际上只有外部文档是全屏。即在外部文档中调用 mozCancelFullScreen 将取消全屏，但在内部文档中调用它不会。

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

示例:

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

跨浏览器存在兼容性问题，这里是不同语句的例子:

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

编辑 2

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

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 中进行调试:

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') 
}