HTML5, выходящий из полноэкранного видео

Ответ 1

Вы можете вызывать только document.mozCancelFullScreen(), если вы находитесь внутри документа, который является полноэкранным. т.е. если вы находились внутри другого документа, который является полноэкранным, mozCancelFullScreen() не будет делать что-либо во внутреннем iframe, так как только внешний документ является полноэкранным. т.е. вызов mozCancelFullScreen во внешнем документе отменяет полноэкранный режим, но вызов его во внутреннем документе не будет.

Также имейте в виду, что mozCancelFullScreen() возвращает полноэкранный режим, чтобы предыдущий полноэкранный элемент был полноэкранным. Поэтому, если вы запросили полноэкранный режим несколько раз, отмена полноэкранного режима не обязательно полностью выйдет из полноэкранного режима, он может вернуться к предыдущему полноэкранному состоянию.

<сильные > Примеры:

1. Вы можете пойти с:

$(document).on('webkitExitFullScreen', function()      {       
  alert("Full Screen Closed"); 
});

2. Вы можете использовать переменную для дальнейшего использования:

var exitedFullScreen;
$(document).on("webkitExitFullScreen", function() {
   exitedFullScreen = !!$(document).fullScreen();
}

3. Применяя его к вашему контейнеру:

$('video')[0].webkitExitFullScreen();

4. Использование только JavaScript:

<script type="text/javascript">
  function ExitVideo() {
      document.getElementsByTagName('video')[0].webkitExitFullScreen();
  }
</script>

5. Также есть несколько сторонних плагинов, которые предоставляют вам доступ к нужному событию:

• http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
• https://github.com/ruidlopes/jquery-fullscreen

РЕДАКТИРОВАТЬ 1

В браузерах есть проблема совместимости, вот пример различных операторов:

document.webkitExitFullscreen();
document.mozCancelFullscreen();
document.exitFullscreen();

EDIT 2

Полноэкранный API включен по умолчанию в Chrome 15, Firefox 14 и Opera 12. Дополнительные сведения о остальной части API см. в спецификации.

Обновлено 2012-10-11: быть встроенным с изменениями спецификации. Нижняя область "S" в requestFullscreen() и изменен document.webkitCancelFullScreen() to document.webkitExitFullscreen().

РЕДАКТИРОВАТЬ 3

Попробуйте следующее, не используя jQuery для отладки в Firefox:

var videoElement = document.getElementById("myvideo");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

EDIT 4

Для использования с jQuery в Firefox попробуйте другой пример:

if (document.mozCancelFullScreen) { 
    alert('Full Screen Closed') 
}

Ответ 2

Я взял это из сообщения выше, но добавил на него. Я установил значения документа, которые затем позволили мне выйти из полноэкранного режима.

  var videoElement = document.getElementById("myvideo");

  function toggleFullScreen() {
    if (!document.mozFullScreen && !document.webkitFullScreen) {
      if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else {
        videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      }
      document.mozFullScreen = true;
      document.webkitFullScreen = true;
    } else {
      if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else {
        document.webkitCancelFullScreen();
      }
    }
  }

  document.addEventListener("keydown", function(e) {
    if (e.keyCode == 13) {
      toggleFullScreen();
    }
  }, false);

Я добавил только эти две строки.

document.mozFullScreen = true;

document.webkitFullScreen = true;

который работал идеально для меня в дополнение к коду llia выше.

Изменить: это похоже на лучшее исправление, а затем то, что было написано ранее.

  fullScreenButton.addEventListener("click", function() {
   if (!document.fullscreenElement &&    // alternative standard method
   !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
     if (video.requestFullscreen) {
      video.requestFullscreen();
     } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
     } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
     } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
     }
    } else {
     if (document.exitFullscreen) {
      document.exitFullscreen();
     } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
     } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
     } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
     }
    }
   });

Ответ 3

Вот обновленный код на данный момент (4 июня 2017 года), работает во всех браузерах:

if (document.exitFullscreen)
    document.exitFullscreen();
else if (document.webkitExitFullscreen)
    document.webkitExitFullscreen();
else if (document.mozCancelFullScreen)
    document.mozCancelFullScreen();
else if (document.msExitFullscreen)
    document.msExitFullscreen();

Ответ 4

$('video').bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {
    var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
    var event = state ? 'FullscreenOn' : 'FullscreenOff';

    // Now do something interesting
    alert('Event: ' + event);    
});