hb + nginx_rtmp模块 + hls.js-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34605417/article/details/88893999

博客提及了HTML和Nginx相关内容，HTML是前端开发常用技术，Nginx常用于后端服务器运维。这些信息技术在网页构建和服务部署中发挥重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
	<title>Video Example</title>
	<script type="text/javascript">
var pusher = null;
// H5 plus事件处理
function plusReady(){
	// 创建直播推流控件
	pusher = new plus.video.LivePusher('pusher',{
		url:'rtmp://xxxx:1935/src/xxxx'
	});
	// 监听状态变化事件
	pusher.addEventListener('statechange', function(e){
		console.log('statechange: '+JSON.stringify(e));
	}, false);
}
document.addEventListener('plusready', plusReady, false);
// 开始推流
function startPusher() {
	pusher.start();
}
	</script>
	</head>
	<body style="margin:0;padding:0;text-align:center;">
		直播推流控件
		<br/><br/>
		<button onclick="startPusher()">开始</button>
		<br/><br/>
		<div id="pusher" style="width:100%;height:300px;background-color:#000000;margin:auto"></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
		<video id="video"></video>
		<script>
		  var video = document.getElementById('video');
		  if(Hls.isSupported()) {
		    var hls = new Hls();
		    hls.loadSource('http://xxxx/360p/xxxx.m3u8');
		    hls.attachMedia(video);
		    hls.on(Hls.Events.MANIFEST_PARSED,function() {
		      video.play();
		  });
		 }
		  else if (video.canPlayType('application/vnd.apple.mpegurl')) {
		    video.src = 'http://xxxx/360p/xxxx.m3u8';
		    video.addEventListener('loadedmetadata',function() {
		      video.play();
		    });
		  }
		</script>

	</body>
	
</html>

html

nginx

server{
        listen 8887;
        server_name xxx.xxx.xxx;
        root /web/myMp4;
        location /{
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
                add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }

}

rtmp {

    server {

        listen 1935;  #监听的端口

        chunk_size 4000;

application src {
    live on;
    #exec_push ffmpeg -i rtmp://xxxxxxx:1935/src/$name -f flv rtmp://localhost/hls/$name 2>>/web/myMp4/ffmpeg-$name.log;
    #exec ffmpeg -re -i rtmp://localhost:1935/src/$name -vcodec flv -acodec copy -s 640x320 -f flv rtmp://localhost:1935/360p/$name 2>>/web/myMp4/ffmpeg-$name.log;
    exec ffmpeg -i rtmp://localhost:1935/src/$name -c:a copy -c:v libx264  -s 360x360 -f flv rtmp://localhost:1935/360p/$name 2>>/web/myMp4/ffmpeg-$name.log;
    hls on;
    hls_path /web/myMp4/allP;
    hls_fragment 5s;
}

application 360p {
    live on;
    hls on;
    hls_path /web/myMp4/360p;
    hls_fragment 5s;
}
    }
}