背景：业务上有一个需求，可以对特定事件进行回放，回放的内容包括有视频信息（ 20s-几分钟不等），以及视频每一帧对应的业务参数等。数据源位于腾讯 COS 对象存储中，一个原始视频大约 5 分钟，但是一个视频包含若干事件，也就是说一个事件只占原始视频的其中 20 秒左右，用户点击每一条事件时，后端会返回上述的业务参数，用于前端和视频帧匹配，视频经常变化，每天都会有新的大量视频上传到对象存储中，大概就是这种。
需求点：
- 视频格式为 avi
- 点击每一条事件时，事件所在的视频片段可以快速加载（比如说在 1-2 秒内快速加载 5 分钟视频中的指定 20 秒）
- 事件会跨视频，也就是说会存在一个事件需要播放两段视频的情况，比如说第一个 5 分钟结尾的 10 秒，到第二个 5 分钟开始的 10 秒
- 需要同屏能够展示 4 个视频播放器，但是共享同一个进度条，拖动进度条，同时操控 4 个视频
- 前端需要能够获取到视频帧信息，比如说进度条拖动到某点时，能够知道当前是具体帧索引，比如说第 300 帧，用于匹配业务参数（目前，后端点击事件信息时会返回）
技术栈：Go + vue3
小弟之前未接触过视频播放的实现，一头雾水，想请教一下有什么成熟的方案可以解决吗？搜了一圈，大多数都是在提 m3u8 、videojs 、flvjs 、http range 之类的。不知道具体要实现上面的 5 点需求，需要有哪些技术点组合。
希望有经验的前辈指点迷津，比如说是否需要后端把 COS 中的视频先拉取到本地，然后切片成 m3u8 存储？还是说直接可以读取 COS 中的视频？再比如说后端会记录这条事件在原视频中的位置，比如说第 400 帧到 1000 帧之间，那怎么和切片或者 range 搭配使用呢？
或许以上就是很简单的视频播放需求，但是没接触过这方面的架构设计，所以一时找不到方向，希望 v 佬们指点下～
Select Language