JavaScript：如何在全屏/非全屏模式下切换HTML5视频？

Question

给出的是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 。

Answer 1

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

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

WebKit不会这样做。 取而代之的是，它将全屏元素以相同的大小居中显示在黑色屏幕上。 要在WebKit中获得相同的全屏行为，您需要自己为元素添加“” width: 100%; height: 100%; “ CSS规则：

#myvideo:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

Answer 2

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

错误：

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

正确：

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