html5 video只缓冲一段,HTML5 video 之缓冲条

概述

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 搞起来吧!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值