How to select the time of a video in html?-CodePudding

I am creating a website with vue.js where a user can select the time when something pops up in a video. The problem is that I cannot select the time of the video.

For example: The user wants an image to popup at 5:00 in his video. How can I let the user select the time and let the image display at the right time?

CodePudding user response：

Here is how to do it with raw javascript. Just adopt it to your code.

<!DOCTYPE html> 
<html> 
<body> 

<video width="200" controls>
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<br>

<big><span id="popup">Here will be popup</span></big>
<br>
<label for="time_to_popup">do popup after (secs): </label>
<input type="text" id="time_to_popup" value="2" name="time_to_popup">

<p>
Video courtesy of 
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

<script>
var intervalID = null;

// get video object
const video = document.querySelector('video');

// if play is started set interval to check play time
// and do popup if playing time bigger than popup trigger time
video.addEventListener('play', (event) => {
  intervalID = setInterval(function() {
    if (video.currentTime > parseInt(document.getElementById("time_to_popup").value)) {
       document.getElementById("popup").textContent = "BOOOOOOM !!!!!";
    }
  }, 1000);
});

// remove interval and revert popup message to normal text
// if video is paused
video.addEventListener('pause', (event) => {
  document.getElementById("popup").textContent = "Here will be popup";
  clearInterval(intervalID);
});
</script>

</body> 
</html>

In short:

html5 video object has currentTime (video.currentTime) attribute that can be used to get current time. Also you can use paused (video.paused) attribute to check is video playing.