nginx配置nginx.conf主要如下：
rtmp {
server {
listen 1935;
chunk_size 4096;
application live {
live on;
}
application hls {
live on;
hls on;
hls_path temp/hls;
hls_fragment 2s;
hls_playlist_length 5;
}
}
}
http {
server {
listen 7800;
location / {
root html;
}
location /hls {
#server hls fragments
types{
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias temp/hls;
}
}
HTML网页使用Video.js来播放HLS:
<!DOCTYPE html>
<html>
<head>
<title>播放器</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
</head>
<body>
<video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>
<source src="http://localhost:7800/hls/stream.m3u8" >
</video>
<script>
var play = document.getElementById('myvideo');
play.src=location.protocol+"//"+location.hostname+":7800/hls/stream.m3u8";
var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')})
player.play();
</script>
</body>
</html>
