javascript - 单击叠加元素时暂停视频

Question

我正在制作一个视频，在几秒钟内，出现了一个覆盖元素来宣传产品。

我想知道是否可以在有人单击覆盖元素时暂停视频，同时这将显示一个显示产品详细信息的窗口。所以:

1. 视频播放并显示叠加元素

2. 用户点击覆盖元素，这样:

   2.1:视频在后台暂停

   2.2:Overlay 元素在暂停的视频上打开一个窗口以显示产品详细信息。

这是我的代码，视频在视频播放过程中会显示几秒钟的叠加元素:

<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

一些示例代码:

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

您可能应该添加一些东西，以便在再次单击叠加层时播放视频 - 但我想您已经明白了。

在此处查看有关视频元素可用内容的文档: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video