ts 视频流问题

[johnlin]

背景：想实现一个 bilibili 视频播放的功能（将一个视频文件分割成 n 个 10 秒的的 ts 文件，第一次播放视频缓冲第一个 ts 文件并且缓冲第二 ts 文件）
遇到的问题：
前端怎么来读取这个 ts 文件列表并且播放？我用 jsmpeg 视频播放不了？
有没有人做过这个，最好能给个 demo （前端的）！谢谢
这是我的 ts 文件列表：
http://image.tcwebsite.cn/-i9h1x12Nr-RyuLDL9iXC6TG6cg%3D/loGQ7EMwKkt3DRU0CjvCod25bFEO/000000.ts
http://image.tcwebsite.cn/-i9h1x12Nr-RyuLDL9iXC6TG6cg%3D/loGQ7EMwKkt3DRU0CjvCod25bFEO/000001.ts
http://image.tcwebsite.cn/-i9h1x12Nr-RyuLDL9iXC6TG6cg%3D/loGQ7EMwKkt3DRU0CjvCod25bFEO/000002.ts
http://image.tcwebsite.cn/-i9h1x12Nr-RyuLDL9iXC6TG6cg%3D/loGQ7EMwKkt3DRU0CjvCod25bFEO/000003.ts
http://image.tcwebsite.cn/-i9h1x12Nr-RyuLDL9iXC6TG6cg%3D/loGQ7EMwKkt3DRU0CjvCod25bFEO/000004.ts
http://image.tcwebsite.cn/-i9h1x12Nr-RyuLDL9iXC6TG6cg%3D/loGQ7EMwKkt3DRU0CjvCod25bFEO/000005.ts
http://image.tcwebsite.cn/-i9h1x12Nr-RyuLDL9iXC6TG6cg%3D/loGQ7EMwKkt3DRU0CjvCod25bFEO/000006.ts

[xieqiqiang00]

m3u8
支持的播放器很多的

[hgc81538]

https://hls-js.netlify.app/demo/

[johnlin]

@hgc81538 感谢，我看一下

[jifengg]

1 楼 2 楼答案结合起来就是了。
你所说的“ts 文件列表”，并不是 b 站自创的，是有现成标准格式“m3u”，而"m3u8"就是 utf8 编码的 m3u （ m3u 是文本内容，所以有文本编码）。
你面临的问题可能还有，“如何将一个视频转成 m3u8”（问题不标准，但是很多人都会这么问的），答案即简单也不简单：“ffmpeg”
接下来是怎么存储 m3u8 （有一个.m3u8 文件和一堆.ts 文件）
接下来是怎么播放，web 端的话 2 楼的答案可以，另外可以搜索相关关键词“hls player”。
至于播放器怎么缓冲 ts 文件的，都是播放器处理的，使用的时候可以不用关心。

进阶的，m3u 本身可以支持切换码率（一个 m3u 包含多路 m3u ），也可以研究研究。

[jifengg]

@jifengg
错别字。“即（既）简单也不简单”

[johnlin]

@jifengg 嗯，谢谢。我看了介绍才知道 m3u8 文件实质是一个播放列表（ playlist ），使用 video.js 直接调用生成好的 application/x-mpegurl 类型的文件就可以了。之前一直想着直接调用 ts 文件来播放，走入误区了！