HTML & Javascript - как обнаружить и включить оповещение при включенном полноэкранном видео - PullRequest
Новая
       0

HTML & Javascript - как обнаружить и включить оповещение при включенном полноэкранном видео

0 голосов
/ 17 января 2019

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

enter image description here

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

вот мой код для HTML 

<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls src="flashtrailer.mp4">
  Your browser does not support the video tag.
</video>


<p><b>Note:</b> The .ogg fileformat is not supported in IE and Safari.</p>
<p><strong>Note:</strong> The video tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>
</html>

Сценарий 

<script type="text/javascript">
    setInterval(function(){ alert("Alert ! Popup"); }, 2000);
  </script>

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Вот как прослушать полноэкранное видео в Chrome 63: 

  function fullScreenListener() {
    if (document.webkitFullscreenElement === this) {
      console.log("Full screen enabled");
    }
  }
  const video = document.querySelector("video");
  video.addEventListener("webkitfullscreenchange", fullScreenListener);

Более кроссплатформенное решение будет: 

  function fullScreenListener() {
    if (document.webkitFullscreenElement === this ||
        document.mozFullScreenElement === this ||
        document.fullScreenElement === this) {
      console.log("Full screen enabled");
    }
  }
  const video = document.querySelector("video");
  if (typeof video.onwebkitfullscreenchange !== "undefined") {
    video.addEventListener("webkitfullscreenchange", fullScreenListener);
  } else if (typeof video.onmozfullscreenchange !== "undefined") {
    video.addEventListener("mozfullscreenchange", fullScreenListener);
  } else if (typeof video.fullscreenchange !== "undefined") {
    video.addEventListener("fullscreenchange", fullScreenListener);
  }

Подробнее о полноэкранном API: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

PS: вызов window.alert () в полноэкранном режиме приводит к выходу видео-тега из полноэкранного режима.

0 голосов
/ 17 января 2019

Это невозможно только при предупреждении. Существуют различные API для полноэкранного режима видео.

для Mozilla - https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI или https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Здесь вы найдете хорошее резюме https://www.thecssninja.com/javascript/fullscreen

Как сделать

Вам просто нужно добавить один div с z-index в теге video или canvas

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...