Встроенный проигрыватель Youtube не выходит из полноэкранного режима

Ну, я думаю, что это серьезная ошибка Youtube, но я не могу найти отчета об этом.

У меня есть веб-приложение, которое отображается в полноэкранном браузере с использованием полноэкранного API JavaScript.

В веб-приложении есть встроенный проигрыватель Youtube. Когда вы открываете плеер Youtube в полноэкранном режиме, затем снова нажимаете кнопку полноэкранного просмотра Youtube, чтобы выйти из полноэкранного режима проигрывателя, он не отвечает!

Я уверен, что это связано с тем, что браузер уже находится в полноэкранном режиме, поэтому есть какой-то конфликт.

Я создал упрощенный пример, который можно посмотреть здесь: http://run.plnkr.co/CjrrBGBvrSspfa92/

Нажмите кнопку "GO FULLSCREEN".
Воспроизведите видео и нажмите полноэкранный режим. Видео будет полноэкранным.
Нажмите полноэкранную кнопку. Он не выйдет.

EDIT: Код для html файла выше:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-6B2zyoFsI" frameborder="0" allowfullscreen></iframe>
<button id="btn">GO FULLSCREEN</button>

<script type="text/javascript">
    document.getElementById("btn").addEventListener("click", function() {
        var elem = document.documentElement;
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.msRequestFullscreen) {
            elem.msRequestFullscreen();
        } else if (elem.mozRequestFullScreen) {
            elem.mozRequestFullScreen();
        } else if (elem.webkitRequestFullscreen) {
            elem.webkitRequestFullscreen();
        }
    });
</script>
</body>
</html>

Ответ 1

Дело в том, что я сделал некоторые поиски, и это швы. Youtube не знает, находится ли видео в полноэкранном режиме или нет при использовании API Fullscreen API, а также не предоставляет Google API для вызова или из полноэкранного режима. Итак, когда вы нажимаете кнопку, и она идет в полноэкранном режиме, вы увидите, что кнопка полноэкранного режима проигрывателя не нажата. Итак, чтобы вернуться в окно, у пользователя есть два варианта: 1) нажмите кнопку 2 раза (первый раз, игрок пытается перейти в полноэкранный режим, а кнопка изменяет состояние, второй раз игрок переходит в оконный режим) - это решение 2) нажмите Esc на клавиатуре.

Я проверил с проигрывателем HTML5.

Кроме того, я попытался вставить кнопку внутри YouTube iframe, чтобы я мог выбрать ее, чтобы выйти из полноэкранного режима, но это не сработало... было бы глупо на самом деле.

Это должно работать:

<div id="videoplayer"></div>
<p><button id="btn">GO FULLSCREEN</button></p>

<script type="text/javascript">
var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('videoplayer', {
      height: '380',
      width: '500',
      videoId: 'h7ArUgxtlJs',
      fs: 1
  });
}

document.getElementById("btn").addEventListener("click", function() {
  var elem = document.getElementById('videoplayer');
  var requestFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen;
  if (requestFullScreen) {
    requestFullScreen.bind(elem)();
  }
});
</script>

Вы можете использовать классическую вставку, я верю.

Рабочая демонстрация

Ответ 2

Это может помочь: "Выход из полноэкранного режима":

// Whack fullscreen
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

// Cancel fullscreen for browsers that support it!
exitFullscreen();

Источник.

Боковое примечание: API Youtube по-прежнему довольно скуден с точки зрения того, что вы можете настроить даже в 2015 году (из-за того, как он полагается на столько iFrame, и они не хотят, чтобы вы пересобирали их игрок). Скорее всего, вы дойдете до такой степени, что сможете использовать кучу фанковых JavaScript-хаков, чтобы получить то, что вы хотите, что может стать грязным и неустойчивым. Было бы лучше использовать один из множества настраиваемых видеоплееров, где вы можете иметь больше контроля с JS; например JW player, Video.js, Проигрыватель потоков, popcorn.js и т.д.

Ответ 3

Потому что ваш обработчик нажатия кнопки работает только в полноэкранном режиме, но не выходит из него.

Попробуйте использовать exitFullscreen() и fullscreenElement.

Что-то вроде этого:

UPDATE:

Протестировано только в Firefox. Он имеет собственные attrs (mozFullScreenElement и mozCancelFullScreen)

document.getElementById("btn").addEventListener("click", function() {
    var elem = document.documentElement;
    if (document.mozFullScreenElement) { // null if not in fullscreen
       document.mozCancelFullScreen();
    } else {
       elem.mozRequestFullScreen();
    }
    // and other prefixes omitted
});

Та же логика должна быть в других браузерах.