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>

在HTML页面中的特定时间覆盖播放视频的链接

1 个答案: