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