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

＆＃34;＃defaultBar＆＃34;似乎是ProgressBar本身，因此初始化barSize的正确值应为622：

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

为什么我的视频栏还没有完成？

1 个答案: