Javascript HTML5 视频 - 加载百分比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5029519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Video - Percentage Loaded?
提问by wilsonpage
Does anyone know what event or property I need to query in order to get a percentage figure of the amount an HTML5 video has loaded? I want to draw a CSS styled "loaded" bar that's width represents this figure. Just like You Tube or any other video player.
有谁知道我需要查询什么事件或属性才能获得 HTML5 视频加载量的百分比数字？我想绘制一个 CSS 样式的“加载”栏，其宽度代表这个数字。就像 You Tube 或任何其他视频播放器一样。
So just like you tube a video will play even if the whole video hasn't loaded and give the user feedback on how much of the video has loaded and is left to load.
因此，就像您管一样，即使整个视频尚未加载，视频也会播放，并向用户提供有关视频已加载和尚待加载的反馈。
Just like the Red Bar on YouTube:
就像 YouTube 上的 Red Bar：
回答by Yann L.
The progressevent is fired when some data has been downloaded, up to three times per second.The browser provides a list of ranges of available media through the bufferedproperty; a thorough guide to this is available on Media buffering, seeking, and time rangeson MDN.
progress当某些数据被下载时触发该事件，每秒最多 3 次。浏览器通过buffered属性提供可用媒体范围的列表；MDN上的媒体缓冲、搜索和时间范围提供了一个全面的指南。
Single load start
单载启动
If the user doesn't skip through the video, the file will be loaded in one TimeRangeand the bufferedproperty will have one range:
如果用户没有跳过视频，文件将被加载到一个TimeRange并且buffered属性将有一个范围：
------------------------------------------------------
|=============| |
------------------------------------------------------
0 5 21
| \_ this.buffered.end(0)
|
\_ this.buffered.start(0)
To know how big that range is, read it this way:
要知道该范围有多大，请按以下方式阅读：
video.addEventListener('progress', function() {
var loadedPercentage = this.buffered.end(0) / this.duration;
...
// suggestion: don't use this, use what's below
});
Multiple load starts
多负载启动
If the user changes the playhead position while it's loading, a new request may be triggered. This causes the bufferedproperty to be fragmented:
如果用户在加载时更改播放头位置，则可能会触发新请求。这会导致buffered属性碎片化：
------------------------------------------------------
|===========| |===========| |
------------------------------------------------------
1 5 15 19 21
| | | \_ this.buffered.end(1)
| | \_ this.buffered.start(1)
| \_ this.buffered.end(0)
\_ this.buffered.start(0)
Notice how the number of the buffer changes.
注意缓冲区的数量是如何变化的。
Since it's no longer a contiguous loaded, the "percentage loaded" doesn't make a lot of sense anymore. You want to know what the current TimeRangeis and how much of that is loaded. In this example you get where the load bar should start(since it's not 0) and where it should end.
由于它不再是连续的加载，“加载百分比”不再有意义。您想知道电流TimeRange是多少以及加载了多少。在此示例中，您将了解负载条应从何处开始（因为它不是 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;
...
});
回答by Koen
The other awnsers didn't work for me so I started digging into this problem and this is what I came up with. The solutions uses jquery to make an progressbar.
其他 awnsers 对我不起作用，所以我开始深入研究这个问题，这就是我想出的。解决方案使用 jquery 制作进度条。
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();
}
);
I hope this helps others as well
我希望这也能帮助其他人
回答by Bruno Sousa
Percentage fix for loaded string.. Output something like 99% loaded inside #loaded element...
已加载字符串的百分比修复.. 在 #loaded 元素中输出类似 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
});
}
