JavaScript:如何切换HTML5视频全屏/非全屏?



给定是一个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.1Google 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) { ... }

相关内容

  • 没有找到相关文章

最新更新