HTML+HLS实现视频播放

背景： 由于前一段时间把儿子一周岁的生日视频上传到了个人阿里云服务器上，通过HTML5的video标签实现了简单的播放MP4文件，但时发现体验非常差，视频要加载缓存时间特别长，有时候可能加载不出。

    接触数字媒体行业之后，发现可以通过HLS技术将MP4文件，通过FFmpeg工具将mp4文件转为TS格式，然后进行切片，形成m3u8的播放列表，然后再通过web播放器进行播放。

1、安装FFmpeg转码工具

[root@qd-vpc-op-snapshot01 ~]# rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7          //如果出现缺少Code提示，就执行此条命令。

 

[root@qd-vpc-op-snapshot01 ~]# rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro         //导入一个Code

[root@qd-vpc-op-snapshot01 ~]# yum repolist      #查看repo源是否安装成功

 

[root@qd-vpc-op-snapshot01 ~]# yum install -y ffmpeg

    参考：https://www.cnblogs.com/kevingrace/p/7553179.html 

2.通过ffmpeg进行切片生成m3u8索引文件

首先将视频文件转为视频编码h.264，音频编码aac格式的mp4文件

查看文件的编码格式ffprobe ./OneYearOld201709.mp4 

1）如果不是mp4的，可以用如下命令进行转

ffmpeg -i input.mkv -acodec copy -vcodec copy out.mp4 

2）将mp4转为完整的ts

ffmpeg -i OneYearOld201709.mp4 -c copy -bsf h264_mp4toannexb 1yearOld.ts 

为什么要用-bsf h264_mp4toannexb,主要是因为使用了mp4中的h264编码，而h264有两种封装： 

一种是annexb模式，传统模式，有startcode，SPS和PPS是在ES中；另一种是mp4模式，一般mp4、mkv、avi会没有startcode，SPS和PPS以及其它信息被封装在container中，每一个frame前面是这个frame的长度，很多解码器只支持annexb这种模式，因此需要将mp4做转换；在ffmpeg中用h264_mp4toannexb_filter可以做转换；所以需要使用-bsf h264_mp4toannexb来进行转换；

3）将ts切片，并生成m3u8文件

ffmpeg -i 1yearOld.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 5 output%03d.ts

 

其中segment 就是切片，-segment_time表示隔几秒进行切一个文件，上面命令是隔5s，你也可以调整成更大的参数。

最终文件列表文图：

3、HTML播放器

播放器脚本：

html页面：

4、实现效果

视频一切片的形式进行播放，速度比较流畅。

拓展学习：

为什么苹果要提出HLS这个协议，其实他的主要是为了解决RTMP协议存在的一些问题。比如RTMP协议不使用标准的HTTP接口传输数据，所以在一些特殊的网络环境下可能被防火墙屏蔽掉。但是HLS由于使用的HTTP协议传输数据，不会遇到被防火墙屏蔽的情况（该不会有防火墙连80接口都不放过吧）。

参考资料：

https://www.jianshu.com/p/d9b64514f8cc

https://blog.csdn.net/nellson/article/details/51755177

https://www.cnblogs.com/kevingrace/p/7553179.html

https://blog.csdn.net/xuxiake2016/article/details/79198645

https://blog.csdn.net/ffffffff8/article/details/84288509

https://blog.csdn.net/hejjunlin/article/details/71001593

播放器：https://download.csdn.net/download/qq_41211900/10647498?utm_source=bbsseo