如何使用 video.js 预加载 m3u8 的所有 .ts答案

【问题标题】：How to preload all .ts of m3u8 with video.js如何使用 video.js 预加载 m3u8 的所有 .ts
【发布时间】：2021-05-24 13:16:42
【问题描述】：

我正在使用video.js 播放 m3u8 链接。我发现它会在播放过程中不断下载.ts片段。

我想在准备期间创建一个加载叠加层，当一切完成后，它就会消失，用户可以像本地一样观看视频。

那么，是否可以在播放前的加载期间预加载所有片段？

更新

我发现 m3u8 文件包含 .ts 链接，是否可以预下载这些 blob 并拦截 fetch 请求以返回下载的 blob 作为响应？

#EXTM3U
#EXT-X-PLAYLIST-TYPE:VOD
#EXT-X-TARGETDURATION:60
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-START-TIME:3516
#EXT-X-PROGRAM-DATE-TIME:2021-02-19T14:55:59+08:00
#EXTINF:2.01,
2758527764_1103365203_1.ts?start=0&end=91931&type=mpegts&resolution=320x240
#EXT-X-PROGRAM-DATE-TIME:2021-02-19T14:56:01+08:00
#EXTINF:1.979,
2758527764_1103365203_1.ts?start=91932&end=171643&type=mpegts&resolution=320x240
#EXT-X-PROGRAM-DATE-TIME:2021-02-19T14:56:02+08:00
#EXTINF:1.932,
2758527764_1103365203_1.ts?start=171644&end=248159&type=mpegts&resolution=320x240
#EXT-X-PROGRAM-DATE-TIME:2021-02-19T14:56:04+08:00
#EXTINF:2.002,
2758527764_1103365203_1.ts?start=248160&end=318659&type=mpegts&resolution=320x240
#EXT-X-PROGRAM-DATE-TIME:2021-02-19T14:56:06+08:00
#EXTINF:2.064,
2758527764_1103365203_1.ts?start=318660&end=393295&type=mpegts&resolution=320x240

【问题讨论】：

标签： video.js

【解决方案1】：

我认为你要做的不是使用自适应流，所以你不应该使用 HLS 或 DASH。

也许您可以使用示例 mp4 播放来获得这种体验。

【讨论】：

这不是我们决定的，我们的供应商只给了我们m3u8链接，我们需要在我们的网站上播放它。如果我们想使用 mp4，我们必须自己转换它并为转换后的视频购买存储空间
好的，我明白了。用高值增加缓冲区大小怎么样？
我试过了，但它似乎不起作用，因为无论缓冲区有多大，视频总是预加载一个 .ts 而不是更多

【解决方案2】：

您可以将“videojs.Vhs.GOAL_BUFFER_LENGTH”值设置为较高的值。这是将预加载的秒数。但是，当缓冲过多时会出现播放问题。原因是所有这些缓冲段最终都会吃掉 ram。在中端移动设备上超过几分钟的预加载会使视频无法使用。

我和几千名学生一起使用它，他们可以预加载更大的块（10 分钟），因此在低带宽连接时他们不会被连续中断。

【讨论】：