jQuery HTML5 退出视频全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19357854/
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
HTML5 exiting video fullscreen
提问by Arvin
I have a HTML5video with custom controls in normal screen. Don't have custom controls at full screen. I just show default controls at full screen. But when exiting full screen I need to disable default controls. How do we know whether the video has exited the full screen mode using JavaScript or jQuery?
我在普通屏幕中有一个带有自定义控件的HTML5视频。不要在全屏时使用自定义控件。我只是全屏显示默认控件。但是当退出全屏时，我需要禁用默认控件。我们如何知道视频是否已使用 JavaScript 或 jQuery 退出全屏模式？
回答by Ilia Rostovtsev
You can only call document.mozCancelFullScreen(), if you're inside a document which is fullscreen. i.e. if you're in an which is a contained inside another document, which is fullscreen, mozCancelFullScreen() won't do anything in the inner iframe, as only the outer document is acutally fullscreen. i.e. calling mozCancelFullScreenin the outer document will cancel fullscreen, but calling it in the inner document won't.
document.mozCancelFullScreen()如果您在全屏文档中，则只能调用。即，如果您位于包含在另一个全屏文档中的 an which 中，则 mozCancelFullScreen() 不会在内部 iframe 中执行任何操作，因为只有外部文档才是真正全屏的。即在外部文档中调用mozCancelFullScreen将取消fullscreen，但在内部文档中调用它不会。
Also be aware that mozCancelFullScreen()reverts fullscreento have the previous fullscreenelement as fullscreen. So if you've requested fullscreenmultiple times, cancelling fullscreenwon't necessarily exit fullscreenfully, it may rollback to the previous fullscreenstate.
另请注意，mozCancelFullScreen()将fullscreen还原为之前的fullscreen元素为fullscreen。所以如果你多次请求全屏，取消全屏不一定完全退出全屏，它可能会回滚到之前的全屏状态。
Examples:
例子：
1. You could go with:
1.你可以去：
$(document).on('webkitExitFullScreen', function() {
alert("Full Screen Closed");
});
2. You could use a variable for further ussage:
2. 您可以使用变量进一步使用：
var exitedFullScreen;
$(document).on("webkitExitFullScreen", function() {
exitedFullScreen = !!$(document).fullScreen();
}
3. Applying it to your container:
3. 将其应用到您的容器中：
$('video')[0].webkitExitFullScreen();
4. Using only JavaScript:
4. 仅使用 JavaScript：
<script type="text/javascript">
function ExitVideo() {
document.getElementsByTagName('video')[0].webkitExitFullScreen();
}
</script>
5. There are also several third-party plugins which provide you access to the event you need:
5. 还有几个第三方插件可以让您访问您需要的事件：
- http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
- https://github.com/ruidlopes/jquery-fullscreen
- http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
- https://github.com/ruidlopes/jquery-fullscreen
EDIT 1
编辑 1
There are compatibility issue across browsers, here is the example of different statements:
浏览器之间存在兼容性问题，以下是不同语句的示例：
document.webkitExitFullscreen();
document.mozCancelFullscreen();
document.exitFullscreen();
EDIT 2
编辑 2
The Fullscreen API is enabled by default in Chrome 15, Firefox 14, and Opera 12. For more information on the rest of the API, see the spec.
全屏 API 在Chrome 15、Firefox 14和Opera 12 中默认启用。有关 API 其余部分的更多信息，请参阅规范。
Updated 2012-10-11: to be inline with spec changes. Lowercased the "S" in requestFullscreen() and changed document.webkitCancelFullScreen() to document.webkitExitFullscreen().
2012 年 10 月 11 日更新：与规范更改保持一致。小写 requestFullscreen() 中的“S”并将 document.webkitCancelFullScreen() 更改为 document.webkitExitFullscreen()。
EDIT 3
编辑 3
Try the following, without using jQuery to debug in Firefox:
尝试以下操作，不使用 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);
EDIT 4
编辑 4
For using with jQuery in Firefox, try the different example:
要在 Firefox 中使用 jQuery，请尝试不同的示例：
if (document.mozCancelFullScreen) {
alert('Full Screen Closed')
}
回答by Stephon Lawrence
I took this from the post above but added onto It. I set the document values which then allowed me to exit fullscreen.
我从上面的帖子中获取了这个，但添加到了它。我设置了文档值，然后允许我退出全屏。
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);
I only added these two lines ..
我只添加了这两行..
document.mozFullScreen = true;
document.webkitFullScreen = true;
document.mozFullScreen = true;
document.webkitFullScreen = true;
which worked perfect for me in addition to llia's code above.
除了上面的 llia 代码外，它对我来说非常有用。
Edit: This Seems like a better fix then what was written before.
编辑：这看起来比之前写的更好。
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();
}
}
});
回答by Koby Douek
Here is an updated code as for now (Jun 4th 2017), works on all browsers:
这是目前（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();
回答by Lucas Pedroza
$('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);
});
