javascript - 在 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>