1、参考https://blog.csdn.net/wenqiangluyao/article/details/97897794
2、命令行执行:注意:尽量不要有中文路径
ffmpeg -rtsp_transport tcp -i "rtsp://admin:12345@192.168.1.2:554/Streaming/Channels/101" -c copy -f hls -hls_time 2.0 -hls_list_size 20 -hls_wrap 15 D:/DEVTOOLS/RTSP/nginx-1.18.0/html/hls/test.m3u8
3、Nginx配置
nginx测试:http://192.168.1.5:8001/
修改配置文件:nginx/conf/nginx.conf
在http --> server下增加:
# ffmpeg生成hls流的http访问配置
location /hls {
#若nginx\conf\mime.types中没有配置如下type,请加上,或直接在mime.types加
#types{
# application/vnd.apple.mpegurl m3u8;
# application/x-mpegURL m3u8;
# video/mp2t ts;
#}
root html;
#add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
}
4、vlc中播放
http://192.168.1.5:8001/hls/test.m3u8
5、html中播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播放</title>
</head>
<body>
<div id="playercontainer"></div>
<p>本示例使用百度开源播放器cyberplayer,您也可以选用其他与实际业务贴合的支持HLS的web播放器</p>
<p>注:IE浏览器中建议不使用file协议打开,建议使用http协议打开</p>
<script type="text/javascript" src="./player/cyberplayer.js"></script>
<script type="text/javascript">
/**
* 本示例使用百度开源播放器cyberplayer,您也可以选用其他与实际业务贴合的支持HLS的web播放器
* 注:IE浏览器中建议不使用file协议打开,建议使用http协议打开
*/
var player = cyberplayer("playercontainer").setup({
width: 680, // 宽度,也可以支持百分比(不过父元素宽度要有)
height: 448, // 高度,也可以支持百分比
title: 'demo示例', // 标题
isLive: true, // 必须设置,表明是直播视频
file: "http://192.168.1.5:8001/hls/test.m3u8",
image: '', // 预览图
autostart: false, // 是否自动播放
stretching: "uniform", // 拉伸设置
repeat: false, // 是否重复播放
volume: 0, // 音量,注:仅当用户同意、网站由用户激活或媒体无声时允许自动播放
controls: true, // 是否显示控制栏
hls: {
reconnecttime: 5 // hls直播重连间隔秒数
},
ak: "39f82ac87fc3462ea4dcc78734450f57" // 百度智能云平台注册(https://cloud.baidu.com)即可获得accessKey
});
</script>
</body>
</html>
6、使用ckplayer播放,使用的是ckplayer X2; 重点在于html5m3u8: true,否则在google浏览器上,会提示没有启用flash插件
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
* {
margin: 0px;
padding: 0px;
}
.vlist {
width: 100%;
}
#a1,.video {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
}
</style>
<title></title>
</head>
<body>
<div class="video" id="mvideo"></div>
<script type="text/javascript" src="/Content/js/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var m3u8Url = "http://192.168.1.2/hls/ch2/play.m3u8";
var picUrl = "";
var player = null;
var videoObject = {
container: '.video',
variable: 'player',
html5m3u8: true,
video: m3u8Url
};
player = new ckplayer(videoObject);
}
</script>
</body>
</html>
7、使用hls.js播放,在有些不支持Video(比如钉钉)的上面,不能插入,而5,6可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>播放</title>
<script src="./player/hls.js"></script>
<style>
h1 {
display: none
}
body {
margin: 0;
}
video {
width: 100%;
height: 100vh
}
</style>
</head>
<body>
<video id="video" style="width:680px;height:448px" controls></video>
<script type="text/javascript">
if (Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://192.168.1.2/hls/ch2/play.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
video.play();
});
}
</script>
</body>
</html>
8、总的效果,使用百度开源播放器cyberplayer比较理想
9、获取历史视频https://bbs.csdn.net/topics/391846900
rtsp://admin:111111@192.168.1.2:554/Streaming/tracks/101?starttime=20201028t063812z&endtime=20201028t064816z
/*表示以单播形式回放通道1 中的录像文件,时间范围是starttime 到endtime,其中starttime 和endtime 的格式要符合ISO 8601 。
具体格式是YYYYMMDD”T”HHmmSS.fraction”Z” ,Y 是年,M 是月,D 是日,T 是时间分格符,H 是小时,M 是分,S 是秒,Z 是可选的、
表示Zulu (GMT) 时间。*/