HTML5 退出视频全屏

HTML5 exiting video fullscreen

本文关键字：视频 退出 HTML5      更新时间：2023-09-26

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

您只能调用 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

默认情况下，Fullscreen API 在 Chrome 15、Firefox 14 和 Opera 12 中处于启用状态。有关 API 其余部分的更多信息，请参阅规范。

2012 年 10 月 11 日更新：与规范更改保持一致。小写的"S" 在requestFullscreen（）中并更改了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') 
}

这是目前（2017年6月4日）的更新代码，适用于所有浏览器：

if (document.exitFullscreen)
    document.exitFullscreen();
else if (document.webkitExitFullscreen)
    document.webkitExitFullscreen();
else if (document.mozCancelFullScreen)
    document.mozCancelFullScreen();
else if (document.msExitFullscreen)
    document.msExitFullscreen();

我从上面的帖子中获取了这个，但添加了它。我设置了文档值，然后允许我退出全屏。

  var videoElement = document.getElementById("myvideo");
  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
      document.mozFullScreen = true;
      document.webkitFullScreen = true;
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }
  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

我只添加了这两行..

document.mozFullScreen = true;

document.webkitFullScreen = true;

除了上面的 Llia 代码之外，这对我来说非常有效。

编辑：这似乎比之前写的更好。

  fullScreenButton.addEventListener("click", function() {
   if (!document.fullscreenElement &&    // alternative standard method
   !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
     if (video.requestFullscreen) {
      video.requestFullscreen();
     } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
     } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
     } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
     }
    } else {
     if (document.exitFullscreen) {
      document.exitFullscreen();
     } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
     } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
     } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
     }
    }
   });

$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';
    // Now do something interesting
    alert('Event: ' + event);    
});
相关文章：