-
上一篇文章末尾的推流拉流，没有牵涉到web的工作，是用vlc显示的。推流端是rtmp+flv，拉流端是rtmp+flv。
推流: ffmpeg -re -stream_loop -1 -i src_h264.mp4 -vcodec copy -f flv rtmp://localhost/test01
拉流: 用vlc打开 rtmp://x.x.x.x/test01 -
第二种形式，推流端是rtmp+flv，拉流端是rtmp+flv。在pc上用chrome观看，需要用到video.js，并且打开chrome的flash支持。
需要开发web，这里简单修改index.html。
参考 https://www.cnblogs.com/chen1994li/p/9496113.html
先下载如下内容到index.html同级目录下：
http://vjs.zencdn.net/5.19/video-js.min.css
http://vjs.zencdn.net/5.19/video.min.js
https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js
https://vjs.zencdn.net/v/oceans.png
https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf
再修改index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h5 rtmp</title>
<link href="video-js.min.css" rel="stylesheet">
<script src="video.min.js"></script>
<script src="videojs-flash.min.js"></script>
</head>
<body>
<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
poster="oceans.png" width="500" height="400" data-setup='{}'>
<source src='rtmp://x.x.x.x/test01/' type='rtmp/flv'/>
</video>
<script type="text/javascript">
videojs.options.flash.swf = 'video-js.swf';
var player = videojs('my-player');
player.play();
</script>
</body>
</html>
推流: ffmpeg -re -stream_loop -1 -i src_h264.mp4 -vcodec copy -f flv rtmp://localhost/test01
拉流: 用chrome打开 http://x.x.x.x/
(注意把web里的x.x.x.x和这里的x.x.x.x换成真实的服务器端ip地址，把width,height换成真实的宽高)
(另外还有注意不要遗漏src='rtmp://x.x.x.x/test01/'中最后那个'/'，如果遗漏了，chrome会报FLASH: rtmpconnectfailure)
- 第三种形式，推流端是rtmp+flv，拉流端是hls+mpegts。没有web的工作，只需要配置nginx.conf即可。
在之前对nginx.conf修改的基础上，在rtmp/server节点里新增如下内容：
application hls {
live on;
hls on;
hls_path /tmp/hls;
hls_fragment 5s;
}
在http/server节点里新增如下内容：
location /hls {
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
root /tmp;
add_header Cache-Control no-cache;
}
hls_path /tmp/hls;
location /hls
root /tmp;
三者指示了分片文件所在的物理路径，以及与rtmp://x.x.x.x/hls/y.m3u8这种形式的对应关系。
推流: ffmpeg -re -stream_loop -1 -i src_h264.mp4 -vcodec copy -f flv rtmp://localhost/hls/test02
拉流: 用vlc打开 http://x.x.x.x/hls/test02.m3u8
(pc端用chrome无法观看，在手机上用浏览器可以直接打开观看，应该是ios,android原生支持hls)
- 第四种形式，不涉及rtmp,hls等协议，html5 video原生支持mp4播放，通过http下载文件播放。
需要开发web，这里简单修改index.html。
先把src_h264.mp4放到index.html同级目录下。
再修改index.html
<!DOCTYPE html>
<html>
<body>
<video controls>
<source src='src_h264.mp4' type='video/mp4'/>
</video>
</body>
</html>
无需主动推流
拉流: 用chrome打开 http://x.x.x.x/
网友评论