javascript - html5-视频下载进度仅在Firefox上有效

我具有以下功能来计算视频的加载进度（非常常见）：

function updateProgressBar (video) {
   if (video.buffered.length > 0) {
       var percent = (video.buffered.end(0) / video.duration) * 100;
       $('#loading').css({'width': percent + '%'});
       console.log(percent);
       if (percent == 100) {
           console.log('video loaded!');
           //everything is loaded, do something.
           $(video).unbind('loadeddata canplaythrough playing'); //prevents the repetition of the callback
       }
   }
}

...绑定到$（document）.ready函数中的'progress'事件（以及其他一些安全措施）：

var videoTest = document.getElementById("videoTest");

$('#videoTest').bind('progress', function () {
     updateProgressBar (videoTest);
});

$('#videoTest').bind('loadeddata', function () {
     updateProgressBar (videoTest);
});

$('#videoTest').bind('canplaythrough', function () {
     updateProgressBar (videoTest);
});

$('#videoTest').bind('playing', function () {
     updateProgressBar (videoTest);
});

您可以在此处查看实时示例：http://www.hidden-workshop.com/video/

如您所见，它在firefox上都运行良好，但是在其他浏览器中，“百分比”变量从未达到预期的“ 100”值；该功能始终在90左右停止，因此我无法知道视频何时完成加载（这对我想要做的事情至关重要）。

就像“进度”事件在我获得“百分比”的最终值之前停止工作一样，因为如果单击“播放”按钮，则会触发“播放”事件，然后成功计算并读取“百分比”变量的最后一个值（即100）。

我是否缺少某些东西，或者这是常见问题？我可以使用任何解决方法吗？

提前致谢！

最佳答案

var videoElement = null; //TODO set reference to video element

var checkVideoLoadingProgressTimerDelay = 50;
var checkVideoLoadingProgressTimerID = -1;

function getVideoLoadingProgress(){
    var end = 0;
    if(videoElement.buffered.length >= 1){
        end = videoElement.buffered.end(0);
    }
    var progress = end / videoElement.duration;
    progress = isNaN(progress) ? 0 : progress;
    return progress;
};

function startCheckVideoLoadingProgressTimer(){
    checkVideoLoadingProgressTimerID =
        setTimeout(checkVideoLoadingProgressTimerHandler, checkVideoLoadingProgressTimerDelay);
};

function checkVideoLoadingProgressTimerHandler(){
    var progress = getVideoLoadingProgress();
    //TODO update progress bar
    if(progress < 1){
        startCheckVideoLoadingProgressTimer();
    }
};

此外，将视频的“预加载”属性的值设置为“自动”也不能保证用户代理将加载整个视频。

关于javascript - html5-视频下载进度仅在Firefox上有效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8631960/