Show a button after video reaches certain time of a video

Question

I have a video page with a button to link to another page. I need to hide the button initially but only shows the button when it's reaches 5 seconds before the completion of the video. It's in standard HTML code like below.

<video controls preload=metadata width=1280 height=720>
<source src='media/video.mp4' type=‘video/mp4'>
<p>Please use a modern browser to view this video.</p>
</video>

How can I achieve that using Javascript? All the examples I can find are about youtube videos and using the function provided by Youtube. Mine is video deployed on intranet.

Thanks for the help,

This question has been answered: https://stackoverflow.com/questions/42320063/how-to-trigger-a-function-when-80-of-the-video-has-been-reached-and-has-been-wa Good luck — Mike Kenyanya, Oct 17 '18 at 20:30
Possible duplicate of [How to trigger a function when 80% of the video has been reached and has been watched?](https://stackoverflow.com/questions/42320063/how-to-trigger-a-function-when-80-of-the-video-has-been-reached-and-has-been-wa) — Heretic Monkey, Oct 17 '18 at 20:38

score 0 · Answer 1 · answered Oct 17 '18 at 20:35

You can listen for timeupdate event of <video> element. The documentation for it can be found here. Code will basically look like this:

const TIME_TO_SHOW_BUTTON = 60; // 60 seconds;
const video = document.getElementById('video');

video.addEventListener('timeupdate', function showButton() {
  if (video.currentTime > TIME_TO_SHOW_BUTTON) {
    // your logic to show the button
    video.removeEventListener('timeupdate', showButton);
  }
});

Show a button after video reaches certain time of a video

1 Answers1