При нажатии escape видеоплеер выходит из полноэкранного режима неверно

420

29 марта 2017, 14:44

Здравствуйте! У меня уже был вопрос по поводу видеоплеера — там мне помогли с ним. Но тут образовалась еще одна проблема:

При переходе в полноэкранный режим срабатывает функция enterFullScreen() а при нажатии кнопки выхода срабатывает функция exitFullScreen(). При переходе в полноэкранный режим к блоку <div class="videoControls"></div> добавляется класс fullscreen, а при выходе из полноэкранного режима этот класс убирается.

Проблема вот в чем: Когда в полноэкранном режиме нажимаешь клавишу esc, то класс fullscreen у div не убирается. Пробовал вот так:

window.onkeypress = function(o){ 
"use strict;"; 
   if(o.keyCode === 27){ 
   exitFullScreen();} 
}; 
 
window.onkeydown = function(o){ 
"use strict;"; 
   if(o.keyCode === 27){ 
   exitFullScreen();} 
};

Но ничего не вышло. А вот код функции exitFullScreen():

function exitFullScreen(){ 
"use strict";	 
	if(document.cancelFullScreen){ 
		document.cancelFullScreen();} 
	else if(document.webkitCancelFullScreen){ 
		document.webkitCancelFullScreen();} 
	else if(document.mozCancelFullScreen){ 
		document.mozCancelFullScreen();} 
	else if(document.oCancelFullScreen){ 
		document.oCancelFullScreen();} 
	else if(document.msCancelFullScreenn){ 
		document.msCancelFullScreen();} 
    document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");	 
    fullscreenHider.style.display = "none"; 
	fullScreenToggler.style.display = "inline-block";}

Спасибо за любую помощь. Вот весь fiddle если нужно: https://jsfiddle.net/0dpp4ng5/

Answer 1

Вместо класса пропробуйте использовать псевдо-класс :fullscreen

div:-moz-full-screen {
    background: red;
}
div:-webkit-full-screen {
    background: red;
}
div:-ms-fullscreen {
    background: red;
}
div:fullscreen {
    background: red;
}

Так-же можно использовать обработчик события выхода из полноэкранного режима:

if (document.addEventListener)
{
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', exitHandler, false);
}
function exitHandler()
{
    if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
    {
         document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");    
    }
}

Answer 2

Спасибо Crantisz! Немного поменял код и сработало для меня:

function exitHandler(){ 
"use strict"; 
  if (document.webkitIsFullScreen === false || document.mozFullScreen === false || document.msFullscreenElement === false){ 
   document.getElementsByClassName("videoControls")[0].classList.remove("fullscreen");	 
    fullscreenHider.style.display = "none"; 
	fullScreenToggler.style.display = "inline-block";} 
}