Issue
First of all, I don't know if this problem is being caused by Javascript or CSS. I have a small piece of code that when user mouse hover the inputbar, it will show the respective video time.
I'm using this formula => ((user mouseX position / input width) * total video seconds)
When I place the mouse over the input bar, the respective time appears, but when I click, the time is different. I don't know if this is a JS or CSS bug.
Check my code =>
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);
}
#container {
max-width: 100%;
}
#slider {
margin-top: 10px;
width: 100%;
}
.video {
width: 100%;
height: 60px;
}
#slidertitle {
display: none;
position: relative;
cursor: default;
top: 0;
left: 0;
}
#text {
position: relative;
cursor: default;
top: 0;
left: 0;
}
#container:hover > #slidertitle {
display: block;
}
<div id="container">
<video id="video" controls class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"></video>
<input type="range" min="0" max="887" step="0.01" id="slider" value="0"/>
<p id="slidertitle"></p>
<p id="text">--</p>
</div>
Note that the problem isn't related to CurrentTime
function since it's making the right math converting seconds to hh:mm:ss. I don't know if the problem is inside showTooltip(e)
or CSS itself. Can you help me? I'm spending some hours trying to fix this, but no success...
Thank you very much.
Solution
This is because of the reason that range slider has some more extended margin or border(but not actually a css margin or border), the JS offset gives exact distance by including them as well.
But the value of slider is numerical without the margin or border.
You can't calculate this margin/border,at the edges, that's the problem.
The ONLY SOLUTION to this is, setting the value of slider= extended value detected on hover.
This is not Ideal, but only possible,better solution.
Refer this, just hope for future updates by html,css,js, that helps you,till then follow this
var valueHover = 0;
function calcSliderPos(e) {
// ((user mouseX position / input width) * total video seconds)
return (e.offsetX / e.target.clientWidth) * parseInt(e.target.getAttribute('max'),10);
}
document.getElementById('slider').addEventListener('mousemove', function(e){
valueHover = calcSliderPos(e).toFixed(2);
//value max,min limit
valueHover= valueHover>e.target.getAttribute('max')?e.target.getAttribute('max'):valueHover;
valueHover= valueHover<0?0:valueHover;
//show tooltip
showTooltip(e);
document.getElementById('slider').addEventListener('input', function(e) {
// THE ONLY SOLUTION
e.target.value = valueHover;
// just your code,no edits here
document.getElementById('video').currentTime = valueHover
document.getElementById('text').innerText = CurrentTime(document.getElementById('video').currentTime);
});
});
document.getElementById('slider').addEventListener('mouseup', function(e) {
// THE ONLY SOLUTION
e.target.value = valueHover;
// just your code,no edits here
document.getElementById('video').currentTime = valueHover
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) {
slidertitle.innerText = CurrentTime(valueHover);
}
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);
}
#container {
max-width: 100%;
}
#slider {
margin-top: 10px;
width: 100%;
}
.video {
width: 100%;
height: 60px;
}
#slidertitle {
display: none;
position: relative;
cursor: default;
top: 0;
left: 0;
}
#text {
position: relative;
cursor: default;
top: 0;
left: 0;
}
#container:hover > #slidertitle {
display: block;
}
<div id="container">
<video id="video" controls class="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"></video>
<input type="range" min="0" max="887" step="0.01" id="slider" value="0"/>
<p id="slidertitle"></p>
<p id="text">--</p>
</div>
Answered By - Neptotech -vishnu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.