我里面有這個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 的創(chuàng)建方式：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;}這就是進度條的調(diào)整方式function ajustarProgressBar(valor) { var progressBar = document.getElementById("progressBar"); progressBar.style.width = valor + "%";}甚至進度條也被觸發(fā)setTimeout(ajustarProgressBar, 40, loadPercentage * 100);進度條不更新，一直保持0%。進度條根據(jù)視頻下載進度進行調(diào)整。視頻進度正常。我已將其打印到控制臺，并且隨著視頻下載的進行，這些值正在發(fā)生變化。
2 回答
UYOU
TA貢獻1878條經(jīng)驗 獲得超4個贊
您必須將參數(shù)傳遞給函數(shù)：
var valor = loadPercentage * 100;
var delay = 100;
setTimeout(() => ajustarProgressBar(valor), delay);
- 編輯 您的視頻進度事件偵聽器現(xiàn)在如下所示：
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條經(jīng)驗 獲得超8個贊
setTimeout 函數(shù)有 2 個參數(shù)：
延遲時間后調(diào)用的函數(shù)
延遲時間（以毫秒為單位）
因此，要調(diào)用您的函數(shù)，您必須創(chuàng)建一個函數(shù)來調(diào)用您的函數(shù)，如下所示：
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 關(guān)注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消