css - 为什么我的视频栏没有结束？

Question

我有一个视频栏 (#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>

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

我不能确定，因为当我按 1:1 复制代码时，它根本不适合我。

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

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

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

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