M3U8视频播放插件hls.js播放缓存参数maxBufferSize和maxBufferLength设置

admin

文章最后更新时间:2024年06月06日

M3U8视频

什么是M3U8视频?

m3u8文件格式最初是由苹果公司提出,用于存储基于HTTP Live Streaming(HLS)协议的播放列表。HLS是一种用于实时流传输的协议,旨在提供更流畅的视频体验。m3u8文件作为播放列表,包含了视频流的信息,指导播放器如何获取和解码视频属性。m3u8文件格式的主要特性在于其适用于HTTP Live Streaming协议,将整个视频分割成小块,并通过HTTP协议实时传输。这种分块传输的方式使得视频可以更好地适应不同网络状况,提供更好的用户体验。常见的使用场景包括在线视频直播、视频点播以及移动端视频应用。m3u8文件格式的优点之一是其适应性强,能够根据网络状况自动调整视频质量,提供更流畅的观看体验。然而,由于其依赖于网络,弱网络环境下可能导致视频加载缓慢。此外,由于其特殊的协议,不是所有的播放器都能够支持m3u8格式。

视频播放缓存

什么是视频播放缓存?

视频缓存有点类似于下载,不过两者存放的地点不同。下载的最终存放地点是硬盘,但缓存则是放到数据交换的缓冲区(比如APP缓存或浏览器缓存)里,无需用户手动操作,由浏览器、播放器等程序自动存储和调用。不过视频播放缓存属于临时文件,可能随时被清除,也会因为过了有效期时间被系统清除。视频缓存的传输速度取决于视频切片提供方网络、视频观看终端的网络以及设备配置等等诸多因素的影响!

视频缓存的作用?

M3U8视频在播放时其ts切片就以缓存的方式存储在播放终端中,播放器播放视频就相当于在读取终端本地ts切片一般,可以大幅提升视频的流畅度和观看体验。

hls.js

hls.js是一个JavaScript库,可实现HTTP Live Streaming客户端。它依靠HTML5视频和MediaSource扩展进行播放。它通过将MPEG-2传输流和AAC / MP3流转换为ISO BMFF(MP4)片段来工作。如果在浏览器中可用,可以使用Web Worker异步执行此转换。WWDC2016期间宣布,hls.js还支持HLS + fmp4。hls.js不需要任何播放器,它可以直接在标准HTML元素上运行。当然也可以被各种播放器调用为插件来播放M3U8视频。

hls.js缓存

以下三个参数为hls.js缓存参数:

hls默认缓存参数配置
maxBufferLength: 30,
maxBufferSize: 60 * 1000 * 1000,
maxMaxBufferLength: 600,

如何修改这三个缓存参数达到缓存更多M3U8视频切片?

方法一:

将hls.js文件下载到本地,打开后分别搜索maxBufferLength、maxMaxBufferLength、maxBufferSize参数,并修改为:

maxBufferLength: 1800,
maxMaxBufferLength: 3600,
maxBufferSize: 6e7,

修改好之后再上传到web播放器文件夹内调用即可。


方法二:

在播放器JavaScript代码中添加maxBufferLength、maxMaxBufferLength、maxBufferSize参数,达到增加播放缓存效果,以实用较广泛的H5播放器Dplayer为例:

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

实测效果

未修改hls.js缓存参数之前实测H5播放器Dplayer最大缓存时长为10分钟(缓存文件大小为75M),如图:

hls.js视频缓存参数设置1


修改hls.js缓存参数之后实测H5播放器Dplayer最大缓存时长为23分钟(缓存文件大小为171M),如图:

hls.js视频缓存参数设置2

文章版权声明:除非注明,否则均为十八码原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 6 条评论,8876人围观)
网友昵称:luobote
luobote V 评论者 沙发
06-17 回复
挺有用的,感谢博主。。。
网友昵称:ajkick
ajkick V 评论者 椅子
06-30 回复
文章不错,写的很好!
网友昵称:ajkick
ajkick V 评论者 板凳
07-02 回复
挺有用的,感谢博主。。。
网友昵称:insbot
insbot V 评论者 凉席
07-27 回复
挺有用的,感谢博主。。。
网友昵称:wuyouw
wuyouw V 评论者 地板
08-17 回复
学习一下
网友昵称:feng
feng V 评论者 6楼
09-10 回复
文章不错,写的很好!emmmmm……看不懂怎么破?文章不错,写的很好!赞、狂赞、超赞、不得不赞、史上最赞!

目录[+]