Question

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

我想知道当有人点击叠加元素时是否可以暂停视频，同时会显示一个显示产品详细信息的窗口。所以：

视频播放并显示叠加元素
用户点击覆盖元素：

2.1：视频暂停背景

2.2：叠加元素会在暂停的视频上打开一个窗口，以显示产品详细信息。

这是我的代码，视频在视频中显示叠加元素几秒钟：

<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

Answer 2

可以使用video.pause()暂停视频 https://www.w3schools.com/tags/ref_av_dom.asp

您可以将点击事件监听器附加到叠加层，
当用户点击叠加层时调用视频暂停功能。

而不是在叠加层上使用不透明度，
您可以尝试使用display: none代替所以，你不需要处理叠加的情况总是阻挡你的元素。

请参阅演示：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();
});

单击叠加元素时暂停视频

2 个答案: