相信有了解的朋友们都知道：
视频直播网站由三个部分构成：1.推流端、2.服务器、3.拉流端。
在该示例项目中，推流端用“EV录屏“软件完成，服务器由”NGINX+RTMP模块“完成，拉流端使用“Video.js”完成。
我的服务器环境如下：
[root@controller ~]# cat /etc/redhat-release
CentOS Linux release 7.2.1511 (Core)
[root@controller ~]# getenforce
Disabled
[root@controller ~]# systemctl stop firewalld
[root@controller ~]# hostname -I
10.0.0.11
1、下载Nginx的rtmp模块
RTMP流媒体服务器，现成的开源方案有很多，有SRS，Red5，wowoza，FMS等，我这里使用的是Nginx的rtmp插件实现实时流转发。
mkdir -p /server/tools
cd /server/tools
git clone https://github.com/arut/nginx-rtmp-module.git
2、安装Nginx及rtmp模块
这里的重点是我们在编译nginx的时候需要添加上下载的nginx的rtmp模块。
useradd -s /sbin/nologin -M nginx
wget http://nginx.org/download/nginx-1.14.0.tar.gz
tar xf nginx-1.14.0.tar.gz
ls
cd nginx-1.14.0/
yum install pcre-devel -y
yum install openssl-devel.x86_64 -y
./configure --user=nginx --group=nginx --with-http_ssl_module --prefix=/application/nginx --add-module=../nginx-rtmp-module
make
make install
3、配置Nginx
cd /application/nginx/conf/
grep -Ev '^$|#' nginx.conf.default >nginx.conf
vim nginx.conf
我的 nginx.conf 如下：
这里的重点是看rtmp这里，其它的也没有什么不同。
如果需要详细的了解rtmp配置，请参考文档：https://github.com/sergey-dryabzhinsky/nginx-rtmp-module
worker_processes 1;
events {
worker_connections 1024;
}
rtmp {
server {
listen 1935;
chunk_size 4096;
application live {
live on;
hls on;
hls_path /application/nginx/html/live;
hls_fragment 5s;
}
}
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location /live {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias /application/nginx/html/live;
expires -1;
add_header Cache-Control no-cache;
}
location / {
root html;
index index.html index.htm;
}
}
}
4、启动nginx
#测试nginx语法
../sbin/nginx –t
#启动nginx
../sbin/nginx
5、使用EV录屏实现推流
我这由于是一个小示例，为了方便我就直接使用“EV录屏”来实现推流了，其实：推流的工具还有很多，例如：第三方直播推流工具OBS以及大家所熟悉的ffmpeg推流；
注意：
ffmpeg推流工具可用于视频切片。有需要的，请查看：Nginx+rtmp+ffmpeg流媒体之使用"视频切片"播放教程
注意：
串流地址：rtmp://10.0.0.11:1935/live
地址密钥随便填，我这里是test
如果你的地址密钥填写和我一样的话，开启直播之后，测试能否下载 test.m3u8 文件？
http://10.0.0.11/live/test.m3u8
如果能够成功下载，恭喜你离成功很近了！
6、配置Web网站首页 播放视频
这里主要就是通过Web网站来拉流，也就是播放直播流的视频。这里主要是通过 Video.js 技术实现的。
vi /application/nginx/html/index.html
我的 index.html 代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>前端播放m3u8格式视频</title>
<link rel="stylesheet" href="http://vjs.zencdn.net/5.5.3/video-js.css">
<script src="https://vjs.zencdn.net/5.5.3/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.js"></script>
</head>
<body>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>
<source id="source" src="https://10.0.0.11/live/test.m3u8" type="application/x-mpegURL">
</video>
</body>
<script>
// videojs 简单使用
var myVideo = videojs('myVideo',{
bigPlayButton : true,
textTrackDisplay : false,
posterImage: false,
errorDisplay : false,
})
myVideo.play() // 视频播放
myVideo.pause() // 视频暂停
</script>
</html>
7、直播测试
打开浏览器测试是否成功？当然，我这里是成功的。
http://10.0.0.11/index.html
2020年06月14日 22:31:52 沙发
测试已经成功了能够播放，但是因为5s的切片，播放了5s后就会中断，不播放后面的内容了，怎么解决呢？
2020年06月15日 11:39:43 1层
@DerekGhost 那你在推流那一步就得用：ffmpeg，ffmpeg可以切割视频，视频切片。简单使用方法如下：
1、/home/file/test.mp4是原视频的路径
2、/home/video/hls/test2.m3u8是切片后的视频地址
具体请参考：Nginx+rtmp+ffmpeg流媒体之使用“视频切片”播放教程