Webill Webill - 6 months ago 7
HTML Question

overlay a link over a playing video at a specific time in a HTML page

I would like to know how to overlay a link over a playing video at a specific time in a HTML page.

We know Youtube does it easily, but I need to do so without Youtube. :)

I thank you all in advance.

Answer

There are many way to do this.

Here is a simple one using setInterval. The link will shown in 3 seconds of the video.

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>

Comments