HTML5video – 已加载的百分比？

有没有人知道我需要查询什么事件或财产，以获得一个HTML5video已经加载的金额的百分比数字？ 我想绘制一个CSS样式的“加载”栏，宽度代表这个数字。 就像你pipe或任何其他video播放器。

所以就像你pipe一个video将播放，即使整个video没有加载，并给予用户有关多lessvideo已加载，并留下来加载的反馈。

就像YouTube上的红酒吧一样：

Answer 1

当一些数据被下载时， progress事件被激发， 最多每秒三次。 浏览器通过buffered属性提供可用媒体范围的列表; 媒体缓冲，search以及 MDN上的时间范围都有详细的指南。

单负载启动

如果用户不跳过video，文件将被加载到一个TimeRange ，并且buffered属性将有一个范围：

 ------------------------------------------------------ |=============| | ------------------------------------------------------ 0 5 21 | \_ this.buffered.end(0) | \_ this.buffered.start(0) 

要知道这个范围有多大，请这样阅读：

 video.addEventListener('progress', function() { var loadedPercentage = this.buffered.end(0) / this.duration; ... // suggestion: don't use this, use what's below }); 

多重负载开始

如果用户在加载时更改播放头位置，则可能会触发新的请求。 这导致buffered属性被分割：

 ------------------------------------------------------ |===========| |===========| | ------------------------------------------------------ 1 5 15 19 21 | | | \_ this.buffered.end(1) | | \_ this.buffered.start(1) | \_ this.buffered.end(0) \_ this.buffered.start(0) 

注意缓冲区的数量是如何变化的。

由于它不再是一个连续的加载 ，所以“ 加载的百分比”不再有很大的意义了。 你想知道当前的TimeRange是多less，并加载了多less。 在这个例子中，你会得到加载栏应该开始的位置 （因为它不是0）以及它应该结束的地方。

 video.addEventListener('progress', function() { var range = 0; var bf = this.buffered; var time = this.currentTime; while(!(bf.start(range) <= time && time <= bf.end(range))) { range += 1; } var loadStartPercentage = bf.start(range) / this.duration; var loadEndPercentage = bf.end(range) / this.duration; var loadPercentage = loadEndPercentage - loadStartPercentage; ... }); 

Answer 2

其他的一些人没有为我工作，所以我开始深入这个问题，这就是我想出的。 解决scheme使用jQuery来创build一个进度条。

 function loaded() { var v = document.getElementById('videoID'); var r = v.buffered; var total = v.duration; var start = r.start(0); var end = r.end(0); $("#progressB").progressbar({value: (end/total)*100}); } $('#videoID').bind('progress', function() { loaded(); } ); 

我希望这也能帮助别人

Answer 3

百分比修复加载的string..输出类似99％加载里面加载元素…

 function loaded() { var v = document.getElementById('videoID'); var r = v.buffered; var total = v.duration; var start = r.start(0); var end = r.end(0); var newValue = (end/total)*100; var loader = newValue.toString().split("."); $('#loaded').html(loader[0]+' loaded...'); $("#progress").progressbar({ value: newValue }); }