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%

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) { ... }