html5 视频 - 使用动态加载视频的进度事件答案

【问题标题】：html5 video - using the progress event with dynamically loaded videoshtml5 视频 - 使用动态加载视频的进度事件
【发布时间】：2012-02-16 15:09:40
【问题描述】：

我在使用“进度”事件检查视频是否 100% 加载时遇到了一些困难。它似乎只适用于 Chrome/Safari。除非我尝试播放，否则 Firefox 似乎不想“预加载”视频。

这是我的html：

<div id="control">
    <a data-video="video/transport/1.0.webm">video1</a>
    <a data-video="video/transport/2.0.webm">video2</a>
    <a data-video="video/transport/3.0.webm">video3</a>
    <a data-video="video/transport/4.0.webm">video3</a>
    <a data-video="video/transport/5.0.webm">video3</a>
</div>

<video id="video" width="960" height="500" type="video/webm" autobuffer></video>

这是我的js（代码借自chrome html5 video buffered.end event）：

$(function(){

    var vid = document.getElementById('video');

    vid.addEventListener('progress', onProgress, false);

    $('#control a').click(function(){
        vid.src = $(this).attr('data-video');
        vid.load();
    });

});

function onProgress(e){

    var vid = document.getElementById('video');
    var percent = null;

    if (vid.buffered.length > 0 && vid.buffered.end && vid.duration) {
        percent = vid.buffered.end(0) / vid.duration;
    } else if (vid.bytesTotal != undefined && vid.bytesTotal > 0 && vid.bufferedBytes != undefined) {
        percent = vid.bufferedBytes / vid.bytesTotal;
    }

    if (percent !== null) {
        percent = 100 * Math.min(1, Math.max(0, percent));

        console.log(percent);
    }

}

【问题讨论】：

autobuffer 不是 video 元素的属性，请尝试使用 preload 代替，它可以设置为 auto、none 或 meta。
感谢您的提示 - @longilong 将您的评论视为正确，我会接受。您链接的讨论帮助我解决了我的问题。

标签： javascript html html5-video dom-events

【解决方案1】：

查看此讨论：HTML5 Video - File Loading Complete Event?

var videoDuration = $html5Video.attr('duration');

var updateProgressBar = function(){
 if ($html5Video.attr('readyState')) {
    var buffered = $html5Video.attr("buffered").end(0);
    var percent = 100 * buffered / videoDuration;

    //Your code here

    //If finished buffering buffering quit calling it
    if (buffered >= videoDuration) {
            clearInterval(this.watchBuffer);
    }
}
};
var watchBuffer = setInterval(updateProgressBar, 500);

【讨论】：