Индикатор выполнения не обновляется даже с SetTimeout - PullRequest
Новая
       0

Индикатор выполнения не обновляется даже с SetTimeout

0 голосов
/ 13 апреля 2020

У меня есть это внутри 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 ]

1 голос
/ 13 апреля 2020

Функция setTimeout принимает 2 параметра:

  1. Функция, вызываемая по истечении времени задержки
  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);
1 голос
/ 13 апреля 2020

Вы должны передать параметр в функцию: 

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

  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...