[英]HTML5 exiting video fullscreen
I have a HTML5 video with custom controls in normal screen. 我的HTML5视频在正常屏幕上带有自定义控件。 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? 我们如何知道视频是否已使用JavaScript或jQuery退出了全屏模式?
You can only call document.mozCancelFullScreen()
, if you're inside a document which is fullscreen . 如果您位于全屏文档中,则只能调用document.mozCancelFullScreen()
。 ie 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 . 也就是说,如果您位于另一个包含在全屏文档中的文档中,则mozCancelFullScreen()不会在内部iframe中执行任何操作,因为只有外部文档才是全屏的 。 ie calling mozCancelFullScreen in the outer document will cancel fullscreen , but calling it in the inner document won't. 例如 ,在外部文档中调用mozCancelFullScreen将取消全屏 ,但在内部文档中调用则不会。
Also be aware that mozCancelFullScreen()
reverts fullscreen to have the previous fullscreen element as fullscreen . 还要注意, mozCancelFullScreen()
会还原全屏,以使先前的全屏元素为fullscreen 。 So if you've requested fullscreen multiple times, cancelling fullscreen won't necessarily exit fullscreen fully, it may rollback to the previous fullscreen state. 因此,如果您多次请求全屏 ,取消全屏不一定会完全退出全屏 ,它可能会回滚到以前的全屏状态。
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.还有一些第三方插件可让您访问所需的事件:
EDIT 1 编辑1
There are compatibility issue across browsers, here is the example of different statements: 跨浏览器存在兼容性问题,这是不同语句的示例:
document.webkitExitFullscreen();
document.mozCancelFullscreen();
document.exitFullscreen();
The Fullscreen API is enabled by default in Chrome 15 , Firefox 14 , and Opera 12 . 在Chrome 15 , Firefox 14和Opera 12中默认启用全屏API。 For more information on the rest of the API, see the spec. 有关其余API的更多信息,请参见规范。
Updated 2012-10-11: to be inline with spec changes. 2012年11月11日更新:与规格更改保持一致。 Lowercased the "S" in requestFullscreen() and changed document.webkitCancelFullScreen() to document.webkitExitFullscreen(). 在requestFullscreen()中将“ S”小写,并将document.webkitCancelFullScreen()更改为document.webkitExitFullscreen()。
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);
For using with jQuery in Firefox, try the different example: 要在Firefox中使用jQuery,请尝试其他示例:
if (document.mozCancelFullScreen) {
alert('Full Screen Closed')
}
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.mozFullScreen = true;
document.webkitFullScreen = 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();
}
}
});
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();
$('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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.