Why is my video bar not finishing to the end? - css

Question

I have a video bar (#progressBar) that moves as the video is playing. The function works and updates correctly. But once the video is finished, the video bar isn't finished. This is what it looks like:
HTML
<div id="skin">
<video id="myMovie" width="640" height="360" autoplay>
<source src="videos/Queen - Killer Queen.mp4">
</video>
<nav>
<div id="buttons">
<i class="fa fa-pause" aria-hidden="true" id="playButton"></i>
</div>
<span id='current'>0:00 / </span> <span id='duration'> 0:00</span>
<div id="defaultBar">
<div id="progressBar"></div>
</div>
<div style="clear:both"></div>
</nav>
</div>
CSS
body {
text-align: center;
display: block;
}
nav {
margin: 5px 0px;
}
#myMovie {
width: 850px;
height: 480px;
}
#myMovie::-webkit-media-controls {
display: none;
}
#playButton {
position: relative;
top: -47px;
left: -294px;
padding: 10px;
padding-bottom: 13px;
padding-left: 20px;
padding-right: 20px;
color: white;
cursor: pointer;
}
#skin {
position: relative;
}
#defaultBar {
position: relative;
float: left;
top: -90px;
left: 481px;
width: 622px;
height: 3px;
background-color: #C2C2C2;
}
#progressBar {
position: absolute;
width: 0;
height: 3px;
background-color: #CA241E;
}
#current, #duration {
position: relative;
top: -77px;
left: -540px;
color: white;
font-family: Open Sans;
font-size: 13px;
}
#duration {
left: -540px;
}
JS
$(document).ready(function() {
$("#myMovie").on(
"timeupdate","play",
function(event) {
function format(s) {
m = Math.floor(s / 60);
m = (m >= 10) ? m : "0" + m;
s = Math.floor(s % 60);
s = (s >= 10) ? s : "0" + s;
return m + ":" + s;
}
var time = format(Math.floor(this.currentTime) + 1);
var duration = format(Math.floor(this.duration) + 1);
onTrackedVideoFrame(time,duration);
});
});
function onTrackedVideoFrame(currentTime, duration){
$("#current").text(currentTime + " / ");
$("#duration").text(duration);
}
$("#myMovie").on("ended",
function(event) {
alert("f");
});
function doFirst(){
barSize=575;
myMovie=document.getElementById('myMovie');
playButton=document.getElementById('buttons');
defaultBar=document.getElementById('defaultBar');
progressBar=document.getElementById('progressBar');
playButton.addEventListener('click', playOrPause, false);
defaultBar.onclick=clickedBar('click', clickedBar, false);
}
function playOrPause(){
if(!myMovie.paused && !myMovie.ended){
myMovie.pause();
playButton.innerHTML='<i class="fa fa-play" aria-hidden="true" id="playButton"></i>';
window.clearInterval(updateBar);
}else{
myMovie.play();
playButton.innerHTML='<i class="fa fa-pause" aria-hidden="true" id="playButton"></i>';
updateBar=setInterval(update, 500);
}
}
function update(){
var size=parseInt (myMovie.currentTime*barSize/myMovie.duration);
if(!myMovie.ended){
progressBar.style.width=size+'px';
}else{
progressBar.style.width=size+'px';
playButton.innerHTML='<i class="fa fa-play" aria-hidden="true" id="playButton"></i>';
window.clearInterval(updateBar);
}
}
function clickedBar(e){
if(!myMovie.paused && !myMovie.ended){
var mouseX=e.pageX-bar.offsetLeft;
var newTime=mouseX*myMovie.duration/barSize;
myMovie.currentTime=newTime;
progressBar.style.width=mouseX+'px';
}
}
window.addEventListener('load', doFirst, false);

Answer 1

I cant be sure as the code doesnt work for me at all when I'm copying it 1:1.
But it seems like you're initializing the variable barSize with the wrong value.
function doFirst(){
barSize=575;
...
"#defaultBar" seems to be the ProgressBar itself so the correct value to initialize barSize with should be 622:
function doFirst(){
barSize=622; // this should work
...