jQuery 使用 HTML5 视频标签退出全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8174208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Exiting Fullscreen With The HTML5 Video Tag
提问by ShockTower
I'm trying to get the video to exit fullscreen at the end of the video but it won't. I searched and found ways to do this but for the life of me I can't get it to work. I'm testing in the latest version of Chrome (15) and iOS 5 on the iPad2. Here's the code I'm using:
我试图让视频在视频结束时退出全屏，但它不会。我搜索并找到了方法来做到这一点，但对于我的生活，我无法让它发挥作用。我正在 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 width="854" height="480"
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>
Any help will be appreciated.
任何帮助将不胜感激。
回答by cbaigorri
webkitExitFullScreenis a method of the videoelement, so it has to be called this way:
webkitExitFullScreen是video元素的方法，所以必须这样调用：
videoElement.webkitExitFullscreen();
//or
$("#myVideoTag")[0].webkitExitFullscreen();
//or, without needing jQuery
document.getElementsById('myVideoTag').webkitExitFullscreen();
Since it's inside an event handler, thiswill be the videothat ended, so:
由于它在事件处理程序中，因此this将是videothat ended，因此：
$("#myVideoTag").on('ended', function(){
this.webkitExitFullscreen();
});
It gets a bit more complicated because webkitExitFullscreenonly works in webkit-based browsers (Safari, Chrome, Opera), so you can learn more about its correct usage on MDN
它变得有点复杂，因为webkitExitFullscreen仅适用于基于 webkit 的浏览器（Safari、Chrome、Opera），因此您可以在MDN上了解有关其正确用法的更多信息
回答by elzaer
I know this is already answered, but here is the little code snippet I ended up using for all browsers to close fullscreen video after it ends.
我知道这已经得到了回答，但这是我最终用于所有浏览器以在结束后关闭全屏视频的小代码片段。
Works on Chrome, IE11, Firefox so far:
目前适用于 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
}
});
You can also find the current full screen element (if any) like:
您还可以找到当前的全屏元素（如果有），例如：
var fullscreenElement = document.fullscreenElement ||
document.mozFullScreenElement || document.webkitFullscreenElement;
Source: https://www.sitepoint.com/use-html5-full-screen-api/
来源：https: //www.sitepoint.com/use-html5-full-screen-api/
Just thought I would add the answer as this was the first question I came across when looking for a solution to this.
只是想我会添加答案，因为这是我在寻找解决方案时遇到的第一个问题。
回答by Keithasaurus Rex
Thank you cbaigorri, it did work wonderfully to use .webkitExitFullscreen();
谢谢 cbaigorri，使用 .webkitExitFullscreen() 确实很好用；
I used the following to exit fullscreen when the video is done playing:
视频播放完毕后，我使用以下命令退出全屏：
<script type="text/javascript">
function CloseVideo() {
document.getElementsByTagName('video')[0].webkitExitFullscreen();
}
</script>
<video controls onended=CloseVideo() >
<source src="video.mp4" type="video/mp4">
</video>
