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

问题描述

有没有人知道我需要查询什么事件或属性，以获取HTML5视频加载量的百分比数字？我想画一个CSS样式的加载栏，宽度代表这个数字。就像You Tube或任何其他视频播放器。

就像你管一个视频将播放，即使整个视频没有加载，并给用户反馈如何

$ b

就像YouTube上的红酒吧：

解决方案

当下载某些数据时会触发 progress 事件，每秒最多三次。浏览器通过<$ c $提供可用媒体范围列表c> buffered property;有关详情，请参阅 MDN上的媒体缓冲，查找和时间范围

单次载入开始

如果使用者不跳过影片，在一个 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; 
 ... 
 //建议：不要使用这个，使用下面的
}）; 
  

多个加载开始

在加载时改变播放头位置，可以触发新的请求。这会导致 buffered 属性碎片化：

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

请注意缓冲区的编号如何更改。

由于它不再是连续的加载，所以加载百分比不再有意义了。你想知道当前 TimeRange 是什么，以及装载了多少。在此示例中，您将在加载栏应该开始（因为它不是0）以及它应该结束的位置。

  video.addEventListener（'progress'，function（）{
 var range = 0; 
 var bf = this.buffered; 
 var time = this.currentTime; 
 
 while（！（bf.start（range）< = time&&&&&&  = bf.end（range）））{
 range + = 1; 
} 
 var loadStartPercentage = bf.start（range）/ this.duration; 
 var loadEndPercentage = bf.end（range）/ this.duration; 
 var loadPercentage = loadEndPercentage  -  loadStartPercentage; 
 ... 
}）; 
  

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.

Just like the Red Bar on YouTube:

解决方案

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.

Single load start

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

Multiple load starts

If the user changes the playhead position while it's loading, a new request may be triggered. This causes the buffered property to be fragmented:

------------------------------------------------------
  |===========|                    |===========|     |
------------------------------------------------------
  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 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屋！