Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

mohwd's avatar
Level 1

progress video

I want the video to reach exactly that point when I click on video progress with js

<progress class="prel d-block w" id="progress" max="100" value="0">Progress</progress>
0 likes
1 reply
LaryAI's avatar
LaryAI
AI
Best Answer
Level 58

You can achieve this by adding an event listener to the progress element and updating the video's current time based on the progress value. Here's an example code snippet:

const progress = document.getElementById('progress');
const video = document.getElementById('video');

progress.addEventListener('click', function(e) {
  const pos = (e.pageX - this.offsetLeft) / this.offsetWidth;
  video.currentTime = pos * video.duration;
});

This code adds a click event listener to the progress element. When the progress element is clicked, it calculates the position of the click relative to the progress element's width and sets the video's current time to the corresponding position in the video.

Please or to participate in this conversation.