代码之家 › 专栏 › 技术社区 › Duck

即使使用SetTimeout,进度条也不会更新

css html javascript

Duck · 技术社区 · 5 年前

我里面有这个 index.html

<body>

<script>
window.onload=function() {
  let videoDiv = createVideoDiv()
  document.getElementById("contentVideo").appendChild(videoDiv);

  document.addEventListener("keydown", function(inEvent){
    controlVideo(inEvent.keyCode);
  });


}
</script>


<div id="progressBarWrapper">
  <div id="progressBar"></div>
</div>

<div id="contentVideo"></div> 

</body>

而这个 css

#progressBarWrapper {
  width: 100%;
  height:15px;
  background-color: black;
}

#progressBar {
  width: 0%;
  height: 15px;
  background-color: green;
}

视频div是这样创建的:

function createVideoDiv() {  
  var video = document.createElement("VIDEO");
  video.setAttribute('controls', '');
  //video.setAttribute('autoplay', '');
  video.setAttribute('preload', 'auto');
  video.setAttribute('width', larguraVideo);
  video.setAttribute('id', 'video');

  var source = document.createElement("SOURCE");
  source.setAttribute('src', obterVideoClicado());
  source.setAttribute('type', 'video/mp4');

  video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    setTimeout(ajustarProgressBar, 40, loadPercentage * 100);

  });

  video.addEventListener('loadeddata', function() {
    var myBar = document.getElementById("progressBarWrapper");
    myBar.style = "display:none;";
    video.play();
  });

  video.appendChild(source);

  return video;
}

这就是进度条的调整方式

function ajustarProgressBar(valor) {
  var progressBar = document.getElementById("progressBar");
  progressBar.style.width = valor + "%";
}

甚至进度条也被解雇了

setTimeout(ajustarProgressBar, 40, loadPercentage * 100);

进度条没有更新,始终保持0%。

进度条将根据视频下载进度进行调整。

视频进度运行良好。我已经将其打印到控制台上,随着视频下载的进行,值也在变化。

1 回复 | 直到 5 年前

Józef Podlecki 5 年前

您必须将参数传递给函数:

var valor = loadPercentage * 100;
var delay = 100;
setTimeout(() => ajustarProgressBar(valor), delay);

--编辑您的视频进度事件监听器现在看起来像:

 video.addEventListener('progress', function() {
    var range = 0;
    var bf = this.buffered;
    var time = this.currentTime;

    while(!(bf.start(range) <= time && time <= bf.end(range))) {
        range += 1;
    }
    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    var valor = loadPercentage * 100;
    var delay = 100;
    setTimeout(() => ajustarProgressBar(valor), delay);

  });

Always Learning 5 年前

这个 setTimeout 函数有2个参数:

延迟时间后调用的函数
延迟时间(毫秒)

因此,要调用您的函数,您必须创建一个函数,该函数将调用您的功能,如下所示:

setTimeout(() => ajustarProgresBar(loadPercentage * 100), 40);

因此,在您的代码中,它可能看起来像这样:

    var loadStartPercentage = bf.start(range) / this.duration;
    var loadEndPercentage = bf.end(range) / this.duration;
    var loadPercentage = loadEndPercentage - loadStartPercentage;
    setTimeout(() => ajustarProgressBar(loadPercentage*100), 40);