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

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

2 个答案: