首页
关于
优乐购
开发
生活
大事记
HTML5 video 之缓冲条
作者: 图恩
分类:
编程开发
阅读: 715
发布时间： 2020-05-23 20:27:17
概述 html5的
标签现在可以完美支持web端的视频播放场景,最近在用
自定义播放器，在绘制进度条的时候，需要标记出视频缓冲段，因此了解了一下媒体元素（video、audio）HTMLMediaElement的一些属性，其中buffered属性跟缓存相关。 buffered 是一个只读属性，标识当前时刻浏览器缓存媒体资源的范围，返回值是一个时间范围（TimeRanges）。 TimeRanges接口用来表示一组时间范围，主要目的是跟踪供
元素和
元素加载使用的媒体哪些部分已经被缓冲。 一个 TimeRanges对象包括一个或多个时间范围，其中每个都由一个开始偏移量和结束偏移量指定。你可以将你想要检索的时间范围的索引值传递给 start() 和 end()方法来引用每个时间范围。 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 搞起来吧！
推荐阅读
发表评论
(审核通过后显示评论)：
昵称：
邮箱：
内容：
发表评论
文章评论(0)
专题推荐
程序员做菜指南
从零搭建博客
前端开发
javascript教程
vue3+ts教程
推荐阅读
1
做没做过的事情叫成长，做不愿意做的事情叫改变，做不敢做的事情叫突破
阅读：1234
发布时间：2025-05-07 21:51:40
2
自驾罗浮山
阅读：1103
发布时间：2025-05-17 22:02:42
3
又遇高一班主任
阅读：1030
发布时间：2025-06-04 22:31:37
4
酥醪村到正果老街：一条不容错过的跑山路线推荐
阅读：809
发布时间：2025-07-19 22:18:57
5
路过大梅沙，没预约真的会被拍！
阅读：792
发布时间：2025-07-15 10:28:10
6
当我的手机能从26楼连接车上的蓝牙后..
阅读：761
发布时间：2025-07-16 22:28:47
7
如何查看gradle包最新版本
阅读：667
发布时间：2025-07-12 10:14:01
8
windows系统邮箱客户端推荐：foxmail
阅读：609
发布时间：2025-06-26 22:31:45
9
超速驾驶被扣6分，罚款200元
阅读：542
发布时间：2025-07-28 22:34:41
10
在 Spring Boot 中集成 Caffeine 缓存
阅读：402
发布时间：2025-07-12 10:04:10
发表评论 (审核通过后显示评论)：