服务器：8核内存16G存储498G(centos7.9)python
准备前期环境
- 下载 wget、lrzsz工具（已安装则更新）
yum install -y wget
yum install -y lrzsz
yum install -y unzip
- 备份repo文件
mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak
- 配置阿里云的yum源
wget -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
4.运行yum makecache生成缓存
yum clean all
yum makecache
5.安装依赖
yum install -y gcc-c++ zlib pcre openssl openssl-devel
6.在opt目录下新建nginx、soft文件夹
mkdir /opt/nginx
mkdir /opt/soft
- 下载nginx及其扩展
为避免网上文件失效，先通过本机下载后再通过rz上传到/opt/nginx目录下
Nginx下载:http://nginx.org/download/nginx-1.10.2.tar.gz
MP4模块:http://h264.code-shop.com/download/nginx_mod_h264_streaming-2.2.7.tar.gz
FLV模块:https://sourceforge.net/projects/yamdi/files/yamdi/1.9/yamdi-1.9.tar.gz/download
直播流:https://github.com/adwpc/nginx-rtmp-module
FastDFS模块:https://github.com/happyfish100/fastdfs-nginx-module
- 解压并安装文件在/opt/nginx目录下
- 目录下安装FLV模块
tar -zxvf yamdi-1.9.tar.gz
cd yamdi-1.9
make && make install
- 解压MP4模块
tar -zxvf nginx_mod_h264_streaming-2.2.7.tar.gz
- 解压HLS模块
unzip nginx-rtmp-module-master.zip
- 安装nginx文件
tar -zxvf nginx-1.10.2.tar.gz
- 处理MP4模块的一个bug
cd nginx_mod_h264_streaming-2.2.7/src
vim ngx_http_streaming_module.c
157行-161行 对WINDOW系统的检查注释掉：
命令模式下157gg跳转到157行
处理后结果如下图：
注释——保存——退出
- 开始安装（cd /opt/nginx/nginx-1.10.2tar.gz）
在安装nginx的时候 一起把mp4模块 以及HLS模块一起装上去
./configure 向导 预配置
./configure --add-module=/opt/nginx/nginx_mod_h264_streaming-2.2.7 --add-module=/opt/nginx/nginx-rtmp-module-master --with-http_ssl_module --prefix=/opt/soft/nginx --with-http_flv_module --with-http_stub_status_module
修改 objs下的文件Makefile：
vim objs/Makefile
将图中所示第3行 -Werror 删除掉
保存并退出后:
make && make install
- 修改nginx服务器的配置文件nginx.conf
cd /opt/soft/nginx/conf
vim nginx.conf
保存后退出
cd /opt/soft/nginx/html
上传一个mp4文件到此目录
- 启动nginx服务器
cd /opt/soft/nginx/sbin
./nginx
打开IP:80(端口号)/test.mp4
如果设置为其它端口号的，需服务器安全组与防火墙的端口都要放行。
防火墙端口放行如下链接：
【https://www.xuexila.com/diannao/anquan/fanghuoqiang/787832.html】
- 切片环境配置
1、下载https://github.com/FFmpeg/FFmpeg/tree/release/4.3
链接：https://pan.baidu.com/s/1nIkNQNmOgVW1CYcTs1Um8w
提取码：y00y
cd /opt/nginx
把文件ffmpeg-4.3 和yasm-1.3 rz 上去
2、解压
yum install -y bzip2
unzip FFmpeg-release-4.3.zip
tar -zxvf yasm-1.3.0.tar.gz
3、安装yasm
cd yasm-1.3.0
./configure
make && make install
4、安装ffmpeg
cd /opt/nginx/FFmpeg-release-4.3
./configure --prefix=/opt/soft/ffmpeg
make && make install
检查是否安装成功：
/opt/soft/ffmpeg/bin/ffmpeg --version
(如报错请百度)
把ffmpeg放到环境中
vim /etc/profile
配置环境变量 path
export PATH=/usr/local/ffmpeg/bin/:$PATH
env
退出远程连接工具之后再连接（如连接不上则为环境出现问题）
- 开始切片
cd /opt/soft/nginx/html
把test.mp4转为ts格式
ffmpeg -y -i /opt/soft/nginx/html/test.mp4 -vcodec copy -acodec copy -vbsf h264_mp4toannexb output.ts
把ts格式的视频切片
ffmpeg -i output.ts -c copy -map 0 -f segment -segment_list testlist.m3u8 -segment_time 1000 output%03d.ts
- 播放
cd /opt/soft/nginx/html
编辑一个新的html文件,文件引入testlist.m3u8
文件内容如下：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频</title>
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" target="_blank" rel="external nofollow" rel="stylesheet">
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>
<body>
<style>
.video-js .vjs-tech {
position: relative !important;
}
</style>
<div>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"
data-setup='{}' style='width: 60%;height: auto'>
<source id="source" src="./testlist.m3u8" type="application/x-mpegURL">
</source>
</video>
</div>
</body>
<script>
// videojs 简单使用
var myVideo = videojs('myVideo', {
bigPlayButton: true,
textTrackDisplay: false,
posterImage: false,
errorDisplay: false,
})
myVideo.play() // 视频播放
myVideo.pause() // 视频暂停
var changeVideo = function (vdoSrc) {
if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式
myVideo.src({
src: vdoSrc,
type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值
})
} else {
myVideo.src(vdoSrc)
}
myVideo.load();
myVideo.play();
}
</script>
</html>
参考：1、https://www.cnblogs.com/theyang/p/12469352.html
2、https://www.jianshu.com/p/3f9b75a7b9a9