使用 HTML5 视频标签退出全屏
Posted
技术标签:
【中文标题】使用 HTML5 视频标签退出全屏【英文标题】：Exiting Fullscreen With The HTML5 Video Tag 【发布时间】：2011-12-31 17:34:29 【问题描述】：我正在尝试让视频在视频结束时退出全屏，但它不会。我搜索并找到了方法来做到这一点，但对于我的生活，我无法让它发挥作用。我正在 iPad2 上测试最新版本的 Chrome (15) 和 ios 5。 这是我正在使用的代码：
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function()
$("#myVideoTag").on('ended', function()
webkitExitFullScreen();
);
);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>854x480</title>
</head>
<body>
<video
src="video/854x480-Template_1.mp4"
poster="images/poster.jpg"
id="myVideoTag"
type="video/mp4"
preload="auto"
autobuffer
controls>
<p>Requires HTML5 capable browser.</p>
</video>
</body>
</html>
任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：webkitExitFullScreen是video元素的方法，所以必须这样调用：
videoElement.webkitExitFullscreen();
//or
$("#myVideoTag")[0].webkitExitFullscreen();
//or, without needing jQuery
document.getElementsById('myVideoTag').webkitExitFullscreen();
由于它在事件处理程序中，this 将是 video 和 ended，所以：
$("#myVideoTag").on('ended', function()
this.webkitExitFullscreen();
);
它变得有点复杂，因为 webkitExitFullscreen 仅适用于基于 webkit 的浏览器（Safari、Chrome、Opera），因此您可以在 MDN 上了解有关其正确用法的更多信息
【讨论】：
谢谢 cbaigorri。就是这样！感谢您的帮助。 当心！函数名是webkitExitFullscreen not webkitExitFullScreen（注意小写“s”）
没有人应该对webkit唯一的答案进行投票。更新您的答案以包括对 所有 浏览器的支持。只支持一种渲染引擎的开发人员根本就不是开发人员！
有时您只需要一个 webkit 答案，因为其他浏览器更易于使用。【参考方案2】：
我知道这已经得到解答，但这是我最终用于所有浏览器的小代码 sn-p，以在它结束后关闭全屏视频。
目前可在 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/
只是想我会添加答案，因为这是我在寻找解决方案时遇到的第一个问题。
【讨论】：
【参考方案3】：感谢 cbaigorri，使用 .webkitExitFullscreen() 的效果非常好；
视频播放完毕后，我使用以下命令退出全屏：
<script type="text/javascript">
function CloseVideo()
document.getElementsByTagName('video')[0].webkitExitFullscreen();
</script>
<video controls onended=CloseVideo() >
<source src="video.mp4" type="video/mp4">
</video>
【讨论】：
以上是关于使用 HTML5 视频标签退出全屏的主要内容，如果未能解决你的问题，请参考以下文章