Как определить, когда видео было выведено из полноэкранного режима с помощью javascript / jquery

Question

У меня есть видео, которое было загружено на мою HTML-страницу, и с помощью javascript я могу вывести видео в полноэкранный режим, нажав на кнопку.Когда это происходит, я могу обнаружить его без проблем.

Следующий код позволяет мне выводить видео в полноэкранный режим, когда я нажимаю кнопку:

// Здесь видео вhtml

  <video controls id="myvideo">
      <source src="/videoPlays.mp4" type="video/mp4"></source>
  </video> 

// здесь код javascript / jquery для активного полноэкранного режима и воспроизведения видео

$("#BtnPlayVideo").click(VideoPlay);

function VideoPlay() {
  var elem = document.getElementById("myvideo");
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
    $('#myvideo')[0].play();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
    $('#myvideo')[0].play();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
    $('#myvideo')[0].play();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
    $('#myvideo')[0].play();
  }
}

Что я хочу сделать, это обнаружитькогда пользователь нажимает кнопку, чтобы выйти из полноэкранного режима и остановить видео в этот момент.Любые идеи или помощь, которую вы можете дать мне для достижения этой цели?

Answer 1

Если вы используете requestFullscreen для переключения в полноэкранный режим, то вы также можете прослушать метод fullscreenchange для обнаружения любых изменений в полноэкранном режиме и использовать логическое свойство fullscreen, чтобы проверить, является ли полныйРежим экрана в настоящее время включен или выключен.

Вот небольшая скрипка, чтобы показать, что:

https://jsfiddle.net/4z8w720a/1/

document.addEventListener("fullscreenchange", function() {
  if (document.fullscreen) {
    console.log('Entering Full Screen Toggle');
  } else {
    console.log('Exiting Full Screen Toggle');
  }
});

PS : Это быличасть экспериментальных API, поэтому, пожалуйста, проверьте их совместимость браузера и будущую поддержку.