前言
为啥会突然想做这个呢，主要是因为直接播放大的mp4文件，实在太慢了。。。。
这加载速度。。。。。
在我欣赏了各大视频网站之后，发现人家都是弹的一个个ts文件，而且很大的电影也可以很快加载好，这就很有趣了，经过欣赏了各位大佬发布的帖子以及博客之后，我终于知道怎么搞这个了，接下来我们一起来试试
解决思路
首先我们要先了解一下如何简单的实现视频流来展现视频
第一步我们需要一个m3u8文件，那么这个m3u8文件是干啥的呢
诶，没错，这个m3u8文件就是存放多个ts文件的信息，就像下图这个样子，博主做的是未进行加密的，有加密兴趣的兄弟们可以试一下
那接下来就是我们要解决的就是怎么将mp4拆分为一个个ts文件，就需要使用ffmpeg来对mp4文件进行拆分
这里需要大家先安装一下ffmpeg，教程在这ffmpeg安装教程
安装好之后，向你的电脑吟诵咒语就可以把视频拆分了，至于咒语是啥，在下面会有介绍
然后在h5的video标签中，把src的内容设置为我们生成的m3u8文件即可。
理论结束了，就可以开始操作了
具体步骤
首先就是将视频切分为多个ts文件以及一个m3u8文件，指令如下
将mp4文件转为ts文件
ffmpeg -y -i 1.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb 1.ts
将ts文件切分为多个小ts文件并生成m3u8文件
ffmpeg -i 1.ts -c copy -map 0 -f segment -segment_list 1.m3u8 -segment_time 3 youqu_%3d.ts
然后就可以得到如下图这样的一堆ts文件
我这里还是使用h5，直接将video标签的src设置为生成的m3u8文件即可，如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video width="1000" controls="controls" id="video" preload="auto" autoplay muted></video>
</body>
<script src="js/hls.min.js"></script>
<script>
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('1.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
</script>
</html>
这里需要引入一下hls.js，使用这个包来帮我们解析m3u8文件，从而生成视频流
成果
一个3GB左右的视频，在使用这种方式之后，播放还是很流畅的，如下图这样
大家如果有问题的话，欢迎点击下方公众号小卡片与博主交流，感谢阅读