JavaScript:如何切换 HTML5 视频全屏/非全屏？

Question

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。

Answer 1

我在开发文档中看到一条注释，也许对您有用:

值得注意的是 Gecko 和 WebKit 实现之间的一个关键区别:Gecko 自动向元素添加 CSS 规则以拉伸(stretch)它以填充屏幕: 宽度:100%；高度:100%

WebKit 不这样做。 相反，它将全屏元素以相同的尺寸居中放置在黑色的屏幕中。要在 WebKit 中获得相同的全屏行为，您需要自己向元素添加自己的“width: 100%; height: 100%;” CSS 规则:

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