给定是一个HTML5
视频元素。按钮应将此视频元素更改为全屏,或结束全屏。
我已经编写了一个JavaScript
函数。这在Firefox
中工作正常。不幸的是,该功能在谷歌浏览器中不起作用。
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();
}
}
}
虽然一切在Firefox
中一切正常,但在Chrome
中,窗口只位于全屏窗口的中间。此外,Chrome无法退出全屏。
我用了Firefox Quantum 61.0.1
和Google Chrome 68.0
.
我在devdocs中看到一个注释,可能对你有用:
值得注意的是,目前 Gecko 和 WebKit 实现之间的关键区别是:Gecko 会自动将 CSS 规则添加到元素中以拉伸它以填充屏幕:width: 100%; height: 100%
WebKit不这样做。 相反,它将全屏元素在黑色的屏幕中以相同的大小居中。要在 WebKit 中获得相同的全屏行为,您需要自己将自己的"width: 100%; height: 100%;
"CSS 规则添加到元素中:
#myvideo:-webkit-full-screen {
width: 100%;
height: 100%;
}
我解决了我的问题...它失败了,因为我在第一个 if 语句中使用了错误的函数:
错:
if (!document.mozFullScreen && !document.webkitFullScreen) { ... }
正确:
if (!document.mozFullScreen && !document.webkitIsFullScreen) { ... }