HTML5 退出视频全屏

Posted 2023-05-07

【中文标题】HTML5 退出视频全屏

【英文标题】：HTML5 exiting video fullscreen

【发布时间】：2013-10-21 21:04:23

【问题描述】：

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

【参考方案1】：

如果您在全屏的文档中，您只能致电document.mozCancelFullScreen()。即，如果您位于另一个文档中，即 fullscreen，则 mozCancelFullScreen() 不会在内部 iframe 中执行任何操作，因为只有外部文档实际上是 fullscreen 。即在外部文档中调用 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

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

2012 年 10 月 11 日更新：与规范更改保持一致。小写的“S” 在 requestFullscreen() 并更改了 document.webkitCancelFullScreen() 到 document.webkitExitFullscreen()。

编辑 3

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

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

【讨论】：

谢谢，但你在这里写的第一个块不起作用。我正在使用 mozilla firefox 24.0。是否存在浏览器兼容性问题

我是这样使用的，但是提示不显示 $(document).on('mozCancelFullscreen', function() alert("Full Screen Closed"); );

你在其他浏览器上试过了吗？

最后一个没问题，就是按回车键..但我们需要鼠标点击退出全屏图标。

将其绑定到该元素上的鼠标事件，例如通过 id？

【参考方案2】：

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

  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();
     
    
   );

【参考方案3】：

这是目前（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();

【参考方案4】：

$('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);    
);

【讨论】：

如果您要复制/粘贴，请列出您的来源：intheloftstudios.com/blog/…