我正在预加载一个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()
(上面),但没有太多改变。
值得注意的是,所有这些仅适用于我第一次访问该页面时。任何后续甚至刷新,视频都会立即加载(兑现)并完美播放。