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?
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.