从视频文件中平滑进度条

Question

我有一个主页视频和一个显示进度的div。问题是，进度条在小块中增加，我希望它是平滑的，我想在这个过程中添加animate()。你有更好的主意吗？

var homepageVideo = $('#homepage_video').get(0);
var progressBar = $('.homepage_progress_bar--progress-bar');
var progressBarContainerWidth = $('.homepage_progress_bar--progress-bar-default').width();
var progress = 0;
var homepageVideoDurationCurrentTime = 0;
var homepageVideoDuration = 0;

homepageVideo.play();

homepageVideo.ontimeupdate = function() {
    updateProgressBar()
};

function updateProgressBar() {
     homepageVideoDurationCurrentTime = homepageVideo.currentTime;
     homepageVideoDuration = homepageVideo.duration;

     progress = getProgress(homepageVideoDurationCurrentTime, homepageVideoDuration);

      progressBar.width(progressBarContainerWidth * progress);
 }

 function getProgress(currentTime, duration) {
     return (100 - (((duration - currentTime) * 100)/duration))/100;
 }

我的HTML只是

<div class="homepage_progress_bar--progress-bar-default">
    <div class="homepage_progress_bar--progress-bar"></div>
</div>

Working Fiddle