0

Given 是一个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虽然在, in 中一切正常Chrome，但该窗口仅位于全屏窗口的中间。此外，Chrome 无法退出全屏。

我用Firefox Quantum 61.0.1和Google Chrome 68.0。

4

2 回答 2

1

我在 devdocs 中看到了一条注释，可能对您有用：

值得注意的是此时 Gecko 和 WebKit 实现之间的一个关键区别：Gecko 自动将 CSS 规则添加到元素以将其拉伸以填充屏幕： width: 100%; height: 100%

WebKit 不这样做。相反，它将全屏元素以相同大小集中在一个原本为黑色的屏幕中。width: 100%; height: 100%;要在 WebKit 中获得相同的全屏行为，您需要自己为元素添加自己的 " " CSS 规则：

#myvideo:-webkit-full-screen {
    width: 100%;
    height: 100%;
}
于 2018-09-06T07:39:23.070 回答
0

我解决了我的问题......它失败了，因为我在第一个 if 语句中使用了错误的函数：

错误的：

if (!document.mozFullScreen && !document.webkitFullScreen) { ... }

正确的：

if (!document.mozFullScreen && !document.webkitIsFullScreen) { ... }
于 2018-09-06T12:57:03.017 回答