Pause video when clicking an overlay element

Question

I am working on a video where during some seconds, an overlay element appears to promote a product.

I would like to know if is possible to pause the video when someone clicks the overlay element and at the same time this will display a window showing the product details. So:

1. Video plays and displays an overlay element

2. User clicks the overlay element so:

   2.1: Video pauses on the background

   2.2: Overlay element opens a window over the paused video to show the product details.

This is my code where the video shows the overlay element for a few seconds during the video:

<video id="myVideo" controls>
  <source id='mp4' src="video.mp4" type='video/mp4'>
</video>

<div id="overlay">
  Something
</div>


<script>

//Shows link between seconds 5 and 10
var overlay = document.getElementById('overlay');
var video   = document.getElementById('myVideo');

  video.addEventListener('timeupdate', function() {
    console.log( video.currentTime );
    var show = video.currentTime >= 5 && video.currentTime < 10;
    overlay.style.opacity = show ? '1' : '0';

  }, false);
</script>

Answer 1

some sample code:

overlay.addEventListener('click', function() { video.pause() })

You should proably add in something that would play the video once the overlay is clicked again - but i think you get the idea.

Have a look here for the documentation on what is available on the video element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Answer 2

Video can be paused using video.pause()
https://www.w3schools.com/tags/ref_av_dom.asp

You can attach an click event listener to your overlay,
and call the video pause function when the user click on the overlay.

Instead of using opacity on your overlay,
you can perhaps try using display: none instead.
So that, you won't need to handle the situation where the overlay
is always blocking in front of your elements.

See demo: https://jsfiddle.net/amoshydra/pan306jt/

//Shows link between seconds 5 and 10
var overlay = document.getElementById('overlay');
var video   = document.getElementById('myVideo');

video.addEventListener('timeupdate', function() {
  console.log( video.currentTime );
  var show = video.currentTime >= 5 && video.currentTime < 10;

  // Try using display style?
  overlay.style.display = show ? 'block' : 'none';
}, false);

overlay.addEventListener('click', function() {
  var urlToOpen = 'http://stackoverflow.com/questions/14132122/open-url-in-new-window-with-javascript';
  window.open(urlToOpen, '_blank');

  // Pause video using the video API
  video.pause();
});