Html Question posted in
Some basic documentation can be found here.

I want a button to appear in the fifth second of the video html5

I have a video tag. I want to appear a button ‘next’ When 5 seconds have passed from the video. Below code but not work.

<script>
var vid1 = document.getElementById("MyVid1");
var btn = document.getElementById("btn");

btn.style.display = "none";

vid1.play();


if(vid1.currentTime==5){
btn.style.display = "block";}
</script>
<video width="320" height="240" id="MyVid1" controls >
  <source src="vid/1.mp4" type="video/mp4">
 
</video>

<button id='btn' >tryit</button>
Tags:

2

Answers


  1. 0

    Instead of checking .currentTime just once, you can set an event listener on the timeupdate event and check .currentTime whenever it is fired.

    var vid1 = document.getElementById("MyVid1");
var btn = document.getElementById("btn");

btn.style.display = "none";

vid1.play();

// EDIT Check the .currentTime whenever the timeupdate event is fired
vid1.addEventListener( "timeupdate", event => {
  if( vid1.currentTime > 5.0 ) btn.style.display = "block";
} )
    Login or Signup to reply.
  2. 0

    Use track cues to synchronize events with video

    This alternative solution is slightly more complex, but very useful when you need to synchronize UI events with a playing video. It also avoids the need to continuously check the video time.

    Video tracks are typically used to display subtitles and captions at precise times. There are also metadata tracks that are hidden from view.

    We can add a metadata track to the video and then add any number of time based cues to the track. Each cue has a start and stop time which can execute a function. Cues also trigger cuechange events. All of these can be used to synchronize UI changes with the video.

    This simple example has only one track with one cue that displays a button at the 5 second mark. The button is hidden again when the video restarts.

    const button = document.querySelector('#example button');
const video = document.querySelector('#example video');
const track = video.addTextTrack('metadata');
const cue = new VTTCue(5,1E10,"");
cue.onenter = () => button.classList.add('show');
cue.onexit = () => button.classList.remove('show');
track.addCue(cue)
button.addEventListener('click', (e) => alert(e.type));
    body {
  font-family: sans-serif;
}

/* optional css to make the button fly-in */

#example {
  position: relative;
  & video {
    height: auto;
    width: 80%;
  }
  & button {
    top: 0;
    left: 0;
    transition: all 2s;
    opacity: 0;
    scale: 0.2;
    position: absolute;
    background: red;
    color: white;
    border: thick solid white;
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 4px 4px 10px black;
  }
  & button.show {
    opacity: 1;
    left: 60%;
    top: 20%;
    scale: 1;
    rotate: 1turn;
  }
}
    <div>Button displays at 5 second mark</div>
<div id="example">
  <video 
    src="https://cms.twopointo.film/assets/project/eucerin.mp4" 
    type="video/mp4" 
    controls 
    muted 
    autoplay 
    loop>
  </video>
  <button>Try Now!</button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search