HTML5 video 之缓冲条

概述

html5的

buffered 是一个只读属性，标识当前时刻浏览器缓存媒体资源的范围，返回值是一个时间范围（TimeRanges）。

TimeRanges接口用来表示一组时间范围，主要目的是跟踪供

TimeRanges 有一个length属性，TimeRanges.length返回一个 unsigned long 类型的数字。表示由time range对象表示的time ranges的数量。TimeRanges.start(0)和TimeRanges.end(0)即获取到的第一段缓存内容开始时间和结束时间（单位秒）

获取缓冲范围

有了上面的基础知识，就可以获取缓冲段了。

这里说明一下，人为改变播放进度，会产生多段不连续TimeRanges，也就是说进度播放到哪，就从哪里开始缓存。

因此缓存进度条要依赖于当前播放时间，从当前时间点查询缓存的时间段,那么可以用如下代码实现

let video = querySelector('#videoId')
video.addEventListener('progress', function () {
            let duration = video.duration; // 视频总长度
            if (duration > 0) {
                for (var i = 0; i < video.buffered.length; i++) {
                    // 寻找当前时间之后最近的点
                    if (video.buffered.start(video.buffered.length - 1 - i) < video.currentTime) {
                        let bufferedLength = (video.buffered.end(video.buffered.length - 1 - i) / duration) * 100 +
                            "%";
                        console.log(bufferedLength)
                        break;
                    }
                }
            }

关于进度条的疑惑

之前看视频，网络情况不好的时候，会暂停等待视频缓冲，如果时间足够，就可以缓冲完整个视频，但是现在看视频刷剧的时候发现，暂停后，视频只会缓冲一小段，然后就会停止，只有继续播放才会继续缓冲。

后来找到了原因：原来的播放器大多使用flash插件播放，html5的播放器是近些年才成为主流的。flash播放器可以缓冲整个视频，而html的视频播放器的缓冲机制是浏览器自身决定的。如果你发现视频暂停也会一直缓冲，那多半是flash播放器，Adobe从2020年12月份起，将不再维护flash，Chrome也将不再支持flash播放器，so, html5 video 搞起来吧！