[英]JavaScript: How to toggle HTML5 video fullscreen / non-fullscreen?
Given is an HTML5
video element. 给出的是
HTML5
视频元素。 A button should change this video element into fullscreen, or end the fullscreen. 按钮应将此视频元素更改为全屏显示,或结束全屏显示。
I have already written a JavaScript
function. 我已经写了一个
JavaScript
函数。 This works fine in Firefox
. 在
Firefox
可以正常工作。 Unfortunately, the function does not work in Google Chrome. 不幸的是,该功能在Google Chrome中不起作用。
function toggleFullScreen() {
var player = document.querySelector('#playerContainer');
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (player.mozRequestFullScreen) {
player.mozRequestFullScreen();
}
else {
player.webkitRequestFullScreen();
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
While everything works fine in Firefox
, in Chrome
, the window is positioned only in the middle of the full-screen window. 尽管在
Firefox
一切正常,在Chrome
,窗口仅位于全屏窗口的中间。 Also, Chrome can not quit the fullscreen. 此外,Chrome无法退出全屏模式。
I used Firefox Quantum 61.0.1
and Google Chrome 68.0
. 我使用
Firefox Quantum 61.0.1
和Google Chrome 68.0
。
I see a note in devdocs, maybe useful for you: 我在devdocs中看到一条注释,可能对您有用:
It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: width: 100%; height: 100%
值得注意的是,此时Gecko和WebKit实现之间的关键区别是:Gecko自动向元素添加CSS规则以将其拉伸以填充屏幕:
width: 100%; height: 100%
width: 100%; height: 100%
WebKit doesn't do this. WebKit不会这样做。 Instead, it centers the fullscreen element at the same size in a screen that's otherwise black.
取而代之的是,它将全屏元素以相同的大小居中显示在黑色屏幕上。 To get the same fullscreen behavior in WebKit, you need to add your own "
width: 100%; height: 100%;
" CSS rules to the element yourself: 要在WebKit中获得相同的全屏行为,您需要自己为元素添加“”
width: 100%; height: 100%;
“ CSS规则:
#myvideo:-webkit-full-screen {
width: 100%;
height: 100%;
}
I solved my problem... it failed because I used the wrong function in the first if-statement: 我解决了我的问题...它失败了,因为我在第一个if语句中使用了错误的函数:
Wrong: 错误:
if (!document.mozFullScreen && !document.webkitFullScreen) { ... }
Correct: 正确:
if (!document.mozFullScreen && !document.webkitIsFullScreen) { ... }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.