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

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缓存参数之后实测H5播放器Dplayer最大缓存时长为23分钟（缓存文件大小为171M），如图：