Javascript 单击覆盖元素时暂停视频

我正在制作一个视频，在几秒钟的时间里，一个覆盖元素似乎在推广一个产品

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

视频播放并显示覆盖元素

用户单击覆盖元素，以便：

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>

某物
//显示第5秒和第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=显示？'1'：'0'；
}，假）；

一些示例代码：

overlay.addEventListener（'click'，function（）{video.pause（）}）

你应该适当地添加一些东西，一旦再次点击叠加，就可以播放视频——但我想你明白了

请在此处查看有关视频元素可用内容的文档：

---

可以使用

Video.pause（）暂停视频


您可以将单击事件侦听器附加到覆盖中，

并在用户单击覆盖时调用视频暂停功能

而不是在覆盖上使用不透明度，

您或许可以尝试改用
display:none
。

这样，您就不需要处理覆盖的情况

总是在元素前面阻塞

请参见演示：

//显示第5秒和第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.display=显示“块”：“无”；
}，假）；
overlay.addEventListener（'click'，function（）{
var urlToOpen=http://stackoverflow.com/questions/14132122/open-url-in-new-window-with-javascript';
window.open（urlToOpen，“_blank”）；
//使用视频API暂停视频
video.pause（）；
});
您应该在
视频
变量上具有函数
.pause（）
，该函数应该为您指明正确的方向。
//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();
});