我里面有这个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%。进度条根据视频下载进度进行调整。视频进度正常。我已将其打印到控制台，并且随着视频下载的进行，这些值正在发生变化。
2 回答
UYOU
TA贡献1878条经验 获得超4个赞
您必须将参数传递给函数：
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);
});
桃花长相依
TA贡献1860条经验 获得超8个赞
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);
- 2 回答
- 0 关注
- 105 浏览
添加回答
举报
0/150
提交
取消