How to select the time of a video in html?

user_17833505 0
Viewed 175

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?

vue.js html javascript
1 Answers

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.

user_139462040
Related