使用HTML5video标记退出全屏

我试图让video在video结束时退出全屏，但事实并非如此。 我搜索并找到了做到这一点的方法，但对于我的生活，我无法让它发挥作用。 我正在iPad2上测试最新版本的Chrome（15）和iOS 5。 这是我正在使用的代码：

    $(document).ready(function(){ $("#myVideoTag").on('ended', function(){ webkitExitFullScreen(); }); });         

任何帮助将不胜感激。

Answer 1

webkitExitFullScreen是video元素的一种方法，因此必须以这种方式调用它：

 videoElement.webkitExitFullscreen(); //or $("#myVideoTag")[0].webkitExitFullscreen(); //or, without needing jQuery document.getElementsById('myVideoTag').webkitExitFullscreen(); 

由于它在事件处理程序中， this将是ended的video ，因此：

 $("#myVideoTag").on('ended', function(){ this.webkitExitFullscreen(); }); 

---

它变得有点复杂，因为webkitExitFullscreen仅适用于基于webkit的浏览器（Safari，Chrome，Opera），因此您可以了解有关其在MDN上的正确用法的更多信息

Answer 2

我知道这已经得到了解答，但这里是我最终用于所有浏览器的小代码片段，以便在结束后关闭全屏video。

适用于Chrome，IE11，Firefox目前为止：

 $("#myVideoTag").on('ended', function(){ if (document.exitFullscreen) { document.exitFullscreen(); // Standard } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); // Blink } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); // Gecko } else if (document.msExitFullscreen) { document.msExitFullscreen(); // Old IE } }); 

您还可以找到当前的全屏元素（如果有），如：

  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; 

资料来源： https ： //www.sitepoint.com/use-html5-full-screen-api/

我想我会添加答案，因为这是我在寻找解决方案时遇到的第一个问题。

Answer 3

谢谢cbaigorri，使用.webkitExitFullscreen（）确实很有效。

video播放完毕后，我使用以下内容退出全屏：