HTML5视频 - 文件加载完成事件？

Question

我需要检测视频文件何时完成加载.我想我应该使用progress-> buffer,但在我的脑海中,我记得读到这是不可靠的.有更好的方法,还是这样安全？

请注意,我将保留每个用户已完全下载的视频的localStorage缓存,因此我事先知道视频是否已加载,如果这是一个棘手的问题,可能会绕过进度 - >缓冲区.

提前致谢.

Answer 1

您可以绑定"缓冲"事件,但(至少在Chrome中)此工作正常,但它不会调用最后一个"缓冲"事件(即它将检测90%... 94%... 98%. ..但不会拨打100%).

注意:最新版本的jQuery应该使用.prop()而不是.attr()

为了解决这个问题,我使用setInterval()每500ms检查一次缓冲区(其中$ html5Video是你的<video>元素:

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);