Initially, I am uncertain whether the issue stems from Javascript or CSS. The code in question involves displaying the corresponding video time when a user hovers over an input bar.
The calculation utilized is as follows:
((user mouseX position / input width) * total video seconds)Below is the code snippet for review:
document.getElementById('slider').addEventListener('mousemove', function(e) {
showTooltip(e);
});
document.getElementById('slider').addEventListener('input', function(e) {
document.getElementById('video').currentTime = document.getElementById('slider').value
document.getElementById('text').innerText = CurrentTime(document.getElementById('video').currentTime);
});
function CurrentTime(v) {
let hrs = Math.floor(v / 3600);
let mins = Math.floor(v / 60) % 60;
let secs = Math.floor(v) % 60;
let ret = "";
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
}
function showTooltip(e) {
// ((user mouseX position / input width) * total video seconds)
let aa = (e.offsetX / e.target.clientWidth) * (e.target.getAttribute('max'));
slidertitle.innerText = CurrentTime(aa);
}
let left = document.getElementById('container').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left) + 'px';
slidertitle.style.left = (x);
}