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

Я решил свою проблему ... она не удалась, потому что я использовал неправильную функцию в первом операторе if:

Неправильно:

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

Правильно:

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

Answer 2

Я вижу заметку в devdocs, может быть полезную для вас:

В настоящее время стоит отметить ключевое отличие между реализациями Gecko и WebKit: Gecko автоматически добавляет CSS-правила к элементу, чтобы растянуть его для заполнения экрана: width: 100%; height: 100%

WebKit не делает этого. Вместо этого он центрирует полноэкранный элемент с тем же размером на черном экране. Чтобы получить такое же полноэкранное поведение в WebKit, вам нужно добавить свои собственные «width: 100%; height: 100%;» CSS-правила к элементу самостоятельно:

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