HTML5视频 - 文件加载完成事件？ [英] HTML5 Video - File Loading Complete Event?

问题描述

我需要检测视频文件何时完成加载。我想我应该使用进度 - >缓冲区，但在我的脑海里，我记得读到这是不可靠的。有没有更好的方法，或者这是安全的？

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

预先感谢。

$ b $你可以绑定缓冲事件，但是（在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 ; 
 
 //你在这里的代码
 
 //如果完成缓冲缓冲，退出调用它
 if（buffered> = videoDuration）{
 clearInterval this.watchBuffer）; 
} 
} 
}; 
 var watchBuffer = setInterval（updateProgressBar，500）; 
  

I need to detect when a video file has completed loading. I'm thinking I should use progress->buffer, but in the back of my mind, I remember reading that this was unreliable. Is there a better way, or is this safe?

Note, I will be keeping a localStorage cache of videos that have been completely downloaded by each user, so I'll know in advance if a video has already loaded, and could probably bypass progress->buffer if that's a sticking point.

Thanks in advance.

解决方案

You can bind the "buffered" event, but (in Chrome at least) this works fine except that it doesn't call the last "buffered" event (i.e. it will detect 90%...94%...98%... but won't call on 100%).

Note: recent versions of jQuery should use .prop() instead of .attr()

To get around this I've used setInterval() to check the buffer every 500ms (where $html5Video is your <video> element:

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

这篇关于HTML5视频 - 文件加载完成事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！