m3u8是一种用utf-8编码的记录索引的纯文本文件格式。在我们的直播剪辑项目中，转码器将直播流的m3u8文件，转码成编辑器能识别的m3u8文件，编辑器将这些信息转换成时间线上的片段信息，编辑器分为上下两部分，下半部分是时间线部分，提供用户编辑操作，上半部分由左右两个窗口组成，左面的窗口是直播信号的实时画面，右面的窗口是时间线的预览展示窗口，用户可以通过play和seek进行播放和查看当前视频画面。笔者在这篇文章中要讲的是如何根据开始时间动态的截取m3u8，以达到正确的展示编辑器的时间线。
这里面的开始时间（startTime）指的是用户想要从哪个时间点开始编辑直播流转换的片段，取值范围从直播流开始转换的时间开始，记为ingestTime，到m3u8文件结尾。这里需要明确，startTime并不等于时间线的开始时间，因为这个时间点有可能不在m3u8对应切片文件的时间。时间线的开始时间（startTimeFromM3u8），确定了时间线以哪个位置作为绘制的起始时间点，如下图。
从ingestTime这个时间点算起，累加分片片段的时长，直到累加的长度大于ingestTime到startTime的长度，然后为了让时间线上仍然展示一个切片宽度的片段，需要向前找回一个切片，最终得到的长度（ingestToStartFromM3u8）就是需要从m3u8中截取的长度。
小伙伴们看到这里是不是觉得已经满足需求了呢？并不是！上面只考虑了startTime的位置已经有切片的情况，那么如果这个位置还没有切片呢？难道时间线上就什么也不显示吗？当然不是，这种情况下，我们会在m3u8中找到最后一个切片（lastIndex），以这个切片对应的时间作为时间线的开始时间，并记住从ingestTime到startTimeFromM3u8的累积切片总长（ingestToStartFromM3u8）。如下图。
m3u8里面的切片数量不会一直不变，随着时间的推移，由直播流转换的切片会逐渐累积，但是我们时间线的起始时间已经画完不可更改，而m3u8里面切片内容每次都是以文件形式全量更新，将之前存储的ingestTostartFromM3u8取来作为累积和。至此，startTime位置尚未生成切片的情况也处理完了。如图。
看到这里的小伙伴们是不是已经理解了呢？我想说的是，作为前端工程师，要能正确的理解项目需求，必要时画图可以帮助我们更快速的写出正确的代码。