JavaScript：如何切换 HTML5 视频全屏/非全屏？答案

【问题标题】：JavaScript: How to toggle HTML5 video fullscreen / non-fullscreen?JavaScript：如何切换 HTML5 视频全屏/非全屏？
【发布时间】：2023-12-18 16:06:01
【问题描述】：

Given 是一个 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。

【问题讨论】：

标签： javascript html html5-video html5-fullscreen

【解决方案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%;
}

【讨论】：

这是一个很好的提示！谢谢，我没想到。但是，Chrome 不会关闭全屏。出于某种原因，当我尝试关闭全屏时，也会调用 player.webkitRequestFullScreen()。它仅适用于 Esc 键。
试试这个方法：player.webkitExitFullScreen
第一个IF语句有问题。 Chrome 也全屏调用请求函数。退出函数永远不会执行。

【解决方案2】：

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

错误：

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

正确：

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

【讨论】：