JavaScript:如何切换HTML5视频全屏/非全屏？
JavaScript:如何切换HTML5视频全屏/非全屏？
提问于 2018-09-06 15:16:03
给定的是一个HTML5视频元素。按钮应将此视频元素更改为全屏，或结束全屏。
我已经编写了一个JavaScript函数。这在Firefox中工作得很好。不幸的是，该功能在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();
}
}
}虽然在Firefox中一切正常，但在Chrome中，窗口仅位于全屏窗口的中间。此外，Chrome不能退出全屏。
我使用了Firefox Quantum 61.0.1和Google Chrome 68.0。
回答 2
Stack Overflow用户
发布于 2018-09-06 15:39:23
我在devdocs中看到了一个注释，可能对你有用：
此时，值得注意的是Gecko和WebKit实现之间的一个关键区别: Gecko会自动向元素添加CSS规则，以将其拉伸以填充屏幕：width: 100%; height: 100%
WebKit不会这样做。取而代之的是，它使全屏元素在其他情况下为黑色的屏幕上以相同大小居中。要在WebKit中获得相同的全屏行为，您需要自己将自己的"width: 100%; height: 100%;“CSS规则添加到元素中：
#myvideo:-webkit-full-screen {
width: 100%;
height: 100%;
}Stack Overflow用户
发布于 2018-09-06 20:57:03
我解决了我的问题。它失败了，因为我在第一个if-语句中使用了错误的函数：
错误：
if (!document.mozFullScreen && !document.webkitFullScreen) { ... }正确：
if (!document.mozFullScreen && !document.webkitIsFullScreen) { ... }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52198469
复制相关文章
相似问题
腾讯云开发者
