Question

我在我的网站上使用这个...

<progress id='video-progress' min='0' max='100' value=''></progress>

这是元素的整个样式......

#video-progress {
    -webkit-appearance: none;
    border: none;
    position:fixed;
    bottom:0;
    left:0;
    height:3px;
    width:100%;
    z-index:1;
}

所以它只是在页面底部从0到100％的屏幕宽度移动。进度条通过Javascript更新。

然而，由于我的视频只有30秒长，因此单步更新将作为进度条的“跳转”执行。 所以酒吧没有平稳运动。

我知道如何在更新的步骤之间设置进度条动画或平滑吗？

更新：

JavaScript ......

function updateProgressBar() {
    var progressBar = document.getElementById('video-progress');
    var percentage = Math.floor((100 / fmVideo.duration) * fmVideo.currentTime);
    progressBar.value = percentage;
}

Answer 1

您可以使用value通过每15 millisecond增加setInterval来为其设置动画，并使用value percentage大于clearInterval时停止递增}。

此代码提取当前value并将其递增，直至达到percentage值。

注意： percentage手动设置为70。

var progressBar = document.getElementById('video-progress');

function updateProgressBar() {
  var percentage = 70;
  var curr = progressBar.value;
  var update = setInterval(function() {
    if (curr > percentage) {
      clearInterval(update);
    }
    progressBar.value = curr++;
  }, 15)
}

updateProgressBar();

#video-progress {
  -webkit-appearance: none;
  border: none;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 1;
}

<progress id='video-progress' min='0' max='100' value=''></progress>

Answer 2

这对我来说非常合适！

function smoothProgress(e) {
    var id = $("#"+e.data.id),
        dur = 5000,
        seq = 100,
        max = parseInt( id.attr("max"), 10),
        chunk = max / dur * seq,
        loop = setInterval(function() {
        if( id.val() < max )
            id.val( id.val() + chunk );
        else
            clearInterval(loop);
        }
    }, seq);
}
$(document).ready(function() {
    $("#launch").on("click", {id: $("progress").attr("id")}, smoothProgress);
});

当然，您可以调整dur参数或根据视频的持续时间动态检索它，以及seq参数（较低，更平滑）。

以下是演示的fiddle。

动画css进度条没有在更新之间跳转？

2 个答案: