html5-视频下载进度仅适用于firefox

html5-video download progress only working on firefox

本文关键字：适用于 firefox 视频下载 html5-      更新时间：2023-09-26

我有以下函数来计算视频的加载进度(很常见):

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)中的'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上运行良好，但在其他浏览器中，'percent'变量从未达到预期的值'100';函数总是在90~时停止，因此我无法知道视频何时完成加载(这对我正在尝试做的事情至关重要)。

这就像'progress'事件在我能得到'percent'的最终值之前停止工作，因为如果你点击'play'按钮，'playing'事件触发，然后成功计算并读取'percent'变量的最后值(即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();
    }
};

也为视频的preload属性设置auto，但不能保证用户代理将加载整个视频

相关文章：