Help needed in implementing a fully functional video progress bar.
Here is the code snippet:
html
<video class="video" width="612" height="350" preload="none" controls controlsList="nodownload" oncontextmenu="return false;">
<source src="video.php?id=1" type="video/mp4">
</video>
<div class="controls">
<button>play</button>
<button>pause</button>
<button>fullscreen</button>
<button>widescreen</button>
<progress class="pbar" value="0" min="0" max="100"></progress>
</div>
js
let video = document.querySelector('.video');
let progressBar = document.querySelector('.pbar');
video.addEventListener('timeupdate', ()=>
{
var percentage = Math.floor((100 / video.duration)*video.currentTime);
progressBar.value = percentage;
progressBar.innerHTML = percentage + "% played";
}
);
progressBar.addEventListener('mousemove', ()=>
{
console.log(progressBar.clientX);
}
);
To clarify, I am trying to retrieve clientX or clientY values from the progress tag when using mousemove event. Any assistance would be appreciated. Thank you.