即使使用 SetTimeout，进度条也不更新
我里面有这个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%。
进度条根据视频下载进度进行调整。
视频进度正常。我已将其打印到控制台，并且随着视频下载的进行，这些值正在发生变化。
qq_遁去的一_12回答
-
UYOU
您必须将参数传递给函数：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); }); -
桃花长相依
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);
随时随地看视频慕课网APP
相关分类
Html5