Question

我正在预加载一个html5视频，似乎Firefox只调用了两次进度事件，然后放弃了。我正在检查以确保在进行任何加载之前我有数据并且看起来都很好。

以下是我设置听众的方法：

jquery的

var video = document.createElement('video');

....

if (Modernizr.video && Modernizr.video.webm) {
    video.setAttribute('src', '/resources/video/myvideo.webm');
} else if (Modernizr.video && Modernizr.video.ogg) {
    video.setAttribute('src', '/resources/video/myvideo.ogv');
} else if (Modernizr.video && Modernizr.video.h264) {
    video.setAttribute('src', '/resources/video/myvideo.mp4');
}

video.setAttribute('id', 'myvideoid');
video.setAttribute('preload', 'auto');
video.setAttribute('autobuffer', 'true');
video.setAttribute('autoplay', 'true');  

$(video).insertBefore('#mydiv');

if (video.readyState > 1) {
    console.log('HAVE META DATA');
} else {
    console.log('NO META DATA');
    var checkVideoMeta = setInterval(function () {
        if (video.readyState > 1) {
            console.log('OK NOW HAVE META DATA');
            video.addEventListener('progress', onProgress, false);
            video.addEventListener('loaded', onProgress, false);
            video.addEventListener('canplaythrough', onProgress, false);
            clearInterval(checkVideoMeta);
        }
    }, 30);
}

var onProgress = function (e) {
    var percent = null;
    if (video) {
        console.log('YES VIDEO');

        if (video.buffered) {
            video.play();  // doesn't seem to make much difference
            console.log('video is buffered');
            console.log(video.buffered.length);
            console.log(video.buffered.end(0));
            console.log(video.duration);

            if (video && video.buffered && video.buffered.length > 0 && video.buffered.end(0) && video.duration) {
                percent = video.buffered.end(0) / video.duration;
            }
        } else {
            console.log('video not buffered');
        }
    } else {
        console.log('NO VIDEO');
    }

    if (percent !== null) {
        percent = Math.round(100 * (Math.min(1, Math.max(0, percent))));
        $('#feedbackStatus span').text(percent + '%');

        if (percent == '100') {
            onLoadComplete();
        }
    }
};

Chrome，Safari似乎运作良好。 Chrome将通过装载和放大Safari通常从零跳到100（这很好）。但是，这是我用Firefox获得的：

NO META DATA
OK NOW HAVE META DATA
YES VIDEO
video is buffered 
1 
0.074 
34.056 
YES VIDEO
video is buffered
1
0.074
34.056

......就是这样。我不确定为什么Firefox会放弃，而其他浏览器会继续浏览进度事件。

修改

我发现/从this post看到

Firefox会在初始页面加载时请求部分内容，然后暂停下载，直到触发播放事件。播放事件被触发后 - 无论用户点击“播放”按钮还是视频标签具有自动播放属性，Firefox都会继续下载视频文件。

所以我在事件监听器中添加了video.play()（上面），但没有太多改变。

值得注意的是，所有这些仅适用于我第一次访问该页面时。任何后续甚至刷新，视频都会立即加载（兑现）并完美播放。

为什么Firefox会停止调用progress事件？

0 个答案: