在 HTML 页面中特定时间播放的视频上叠加链接

Question

我想知道如何在HTML页面的特定时间在播放的视频上叠加链接。

我们知道Youtube很容易做到这一点，但我需要在没有Youtube的情况下做到这一点。 :)

我提前感谢大家。

Answer 1

有很多方法可以做到这一点。

这是一个使用setInterval的简单方法。该链接将在视频的 3 秒内显示。

var video = document.querySelector('video'),
    link = document.querySelector('a'),
    timer = document.querySelector('#timer');
setInterval(function() {
  if (video.currentTime > 3 && video.currentTime < 6) {
    link.style.display = 'block';
  }
  else {
    link.style.display = 'none';
  }
  
  timer.textContent = video.currentTime;
}, 100);

.wrapper {
  position:relative;  
}
a {
  position:absolute;
  top:10px;
  left:10px;
  background:rgba(0,0,0,0.8);
  color:#fff;
  display:none;
}

<div class="wrapper">
  <video width="320" height="240" controls>
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <a href="http://google.com" target="_blank">Here is your link</a>
</div>
<div>Current time: <span id="timer"></span></div>