Css 为什么我的视频条没有结束？

我有一个视频条（

#progressBar

），它随着视频播放而移动。该功能正常工作并正确更新。但一旦视频完成，视频条就不会完成。这就是它看起来的样子：

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>

JS

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;
}

$(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);

$（文档）.ready（函数（）{
$（“#我的电影”）。在(
“时间更新”，“播放”，
功能（事件）{
函数格式{
m=数学楼层（s/60）；
m=（m>=10）？m:“0”+m；
s=数学楼层（s%60）；
s=（s>=10）？s：“0”+s；
返回m+“：”+s；
}
var time=格式（Math.floor（this.currentTime）+1）；
var duration=格式（Math.floor（this.duration）+1）；
OnTracked视频帧（时间、持续时间）；
});
});
函数onTrackedVideoFrame（当前时间、持续时间）{
$（“#当前”）.text（当前时间+“/”）；
$（“#持续时间”）。文本（持续时间）；
}
$（“#我的电影”）。在（“结束”，
功能（事件）{
警报（“f”）；
});
函数doFirst（）{
棒材尺寸=575；
myMovie=document.getElementById（'myMovie'）；
playButton=document.getElementById（'buttons'）；
defaultBar=document.getElementById（'defaultBar'）；
progressBar=document.getElementById（'progressBar'）；
playButton.addEventListener（'单击'，播放或暂停，错误）；
defaultBar.onclick=clickedBar（'click'，clickedBar，false）；
}
函数playOrPause（）{
如果（！myMovie.paused&！myMovie.end）{
myMovie.pause（）；
playButton.innerHTML=''；
clearInterval（updateBar）；
}否则{
我的电影；
playButton.innerHTML=''；
updateBar=setInterval（更新，500）；
}
}
函数更新（）{
var size=parseInt（myMovie.currentTime*barSize/myMovie.duration）；
如果（！myMovie.end）{
progressBar.style.width=size+'px'；
}否则{
progressBar.style.width=size+'px'；
playButton.innerHTML=''；
clearInterval（updateBar）；
}
}
功能点击条（e）{
如果（！myMovie.paused&！myMovie.end）{
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）；

我不能确定，因为当我以1:1的比例复制代码时，代码对我根本不起作用

但似乎您正在使用错误的值初始化变量barSize

function doFirst(){
    barSize=575;
    ...

“#defaultBar”似乎是ProgressBar本身，因此初始化barSize的正确值应为622：

function doFirst(){
    barSize=622; // this should work
    ...

---

我不能确定，因为当我以1:1的比例复制代码时，代码对我根本不起作用

但似乎您正在使用错误的值初始化变量barSize

function doFirst(){
    barSize=575;
    ...

“#defaultBar”似乎是ProgressBar本身，因此初始化barSize的正确值应为622：

function doFirst(){
    barSize=622; // this should work
    ...