HTML5 视频 - 加载百分比? [英] HTML5 Video - Percentage Loaded?

问题描述

有谁知道我需要查询什么事件或属性才能获得 HTML5 视频加载量的百分比数字?我想绘制一个 CSS 样式的加载"栏，其宽度代表这个数字.就像 You Tube 或任何其他视频播放器一样.

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.

因此，就像您管一样，即使整个视频尚未加载，视频也会播放，并向用户提供有关视频已加载和尚待加载的反馈.

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.

就像 YouTube 上的 Red Bar:

推荐答案

progress 事件在下载某些数据时触发，每秒最多 3 次. 浏览器通过 buffered<提供可用媒体范围的列表/代码>属性；MDN 上的媒体缓冲、搜索和时间范围上提供了对此的全面指南.

The progress event 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 buffered property; a thorough guide to this is available on Media buffering, seeking, and time ranges on MDN.

如果用户没有跳过视频，文件将被加载到一个 TimeRange 并且 buffered 属性将有一个范围:

If the user doesn't skip through the video, the file will be loaded in one TimeRange and the buffered property will have one range:

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

开始多次加载

如果用户在加载时更改播放头位置，则可能会触发新请求.这会导致 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.

由于它不再是连续的加载，加载百分比"不再有意义.您想知道当前 TimeRange 是什么以及加载了多少.在此示例中，您将了解负载栏应该从哪里开始(因为它不是 0)以及它应该在哪里结束.

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 TimeRange is 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.

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

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