2

How to put an alert when video full screen is on? i want an output like this thanks.

enter image description here

when the full screen mode is on i want an alert and the popup must alert like 2 seconds and then it will popup. is there a way how can i do that?

here is my code for 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

<script type="text/javascript">
    setInterval(function(){ alert("Alert ! Popup"); }, 2000);
  </script>
Sarath
  • 68
  • 4
  • Possible duplicate of [How to capture the fullscreen event when I press the default fullscreen button of HTML5 video element?](https://stackoverflow.com/questions/34896683/how-to-capture-the-fullscreen-event-when-i-press-the-default-fullscreen-button-o) – Kossi D. T. S. Jan 17 '19 at 08:02
  • Just add an `else{ showAlert(); }` in `exitHandler` from [this answer](https://stackoverflow.com/a/54105590/3702797) to your previous question... – Kaiido Jan 17 '19 at 08:02
  • @Kaiido i tried it sir it didnt work :( –  Jan 17 '19 at 08:07
  • @KossiD.T.S. it didnt work sir :( –  Jan 17 '19 at 08:07

2 Answers2

1

Here is how to listen to full screen enabled video on Chrome 63:

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

A more cross-platform solution would be:

  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);
  }

More info about Fullscreen API: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

PS: Calling window.alert() in full-screen mode causes the video tag to get out of the full-screen mode.

yigitusta
  • 316
  • 2
  • 8
0

It is not possible with just alert. There are different api for fullscreen video mode.

for Mozilla - https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI or https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

Here you will find good summary https://www.thecssninja.com/javascript/fullscreen

How to DO

You just need to add one div with z-index in video or canvas tag

kamlesh A
  • 1
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – uv_ Jan 17 '19 at 08:48
  • It can be done. I hope you are looking for this[link](https://codepen.io/joe-watkins/pen/dnvoE) video overlay example – kamlesh A Jan 23 '19 at 12:21