對rtmp/http-flv/hls這三種協(xié)議不熟悉的同學(xué)，強(qiáng)烈建議先看看網(wǎng)友寫的這篇文章科普下：理解RTMP、HttpFlv和HLS的正確姿勢 。
srs可以同時(shí)支持這3種協(xié)議，只要修改conf配置文件即可，默認(rèn)情況下加載的是 /usr/local/srs/conf/srs.conf，參考下圖：
修改該文件：
listen 1935;
max_connections 200;
srs_log_tank file;
srs_log_file ./objs/srs.log;
http_api {
enabled on;
listen 1985;
}
http_server {
enabled on;
listen 8080;
dir ./objs/nginx/html;
}
stats {
network 0;
disk sda sdb xvda xvdb;
}
vhost __defaultVhost__ {
# http-flv設(shè)置
http_remux{
enabled on;
mount [vhost]/[app]/[stream].flv;
hstrs on;
}
# hls設(shè)置
hls{
enabled on;
hls_path ./objs/nginx/html;
hls_fragment 10;
hls_window 60;
}
}
然后執(zhí)行：
sudo /etc/init.d/srs reload
讓配置即時(shí)生效，VLC Player里下列3個(gè)地址，應(yīng)該都可以播放了：
| 協(xié)議 | 地址 |
| rtmp | rtmp://srs_server_ip:1935/live/livestream |
| http flv | http://srs_server_ip:8080/live/livestream.flv |
| hls | http://srs_server_ip:8080/live/livestream.m3u8 |
要注意的是：hls是把實(shí)時(shí)的視頻流，分成1個(gè)個(gè)小的切片，保存在/usr/local/srs/objs/nginx/html/live/ 目錄下，參考下圖：
不太嚴(yán)謹(jǐn)?shù)脑挘梢岳斫鉃椴シ诺氖欠?wù)器上已經(jīng)生成好的視頻片段，因此就算在obs把實(shí)時(shí)視頻直播源切斷，還是可以播放一段時(shí)間的。(實(shí)時(shí)生成視頻切片需要時(shí)間，而且每個(gè)切片本身是N秒一切割，所以不難理解為啥hls協(xié)議延時(shí)最大）
h5播放hls:
借助video-js項(xiàng)目，可以很容易實(shí)現(xiàn).m3u8的hls播放：
<head>
<title>video-js HLS demo</title>
<link rel="stylesheet">
</head>
<body>
<video id='my-video' class='video-js' controls preload='auto' width='640' height='320' poster='avatar-poster.jpg'
data-setup='{ "html5" : { "nativeTextTracks" : true } }'>
<source src='http://10.2.*.*:8080/live/livestream.m3u8' type="application/x-mpegURL">
<p class='vjs-no-js'>
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a target='_blank'>supports HTML5 video</a>
</p>
</video>
<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
<script>
var player = videojs('my-video');
player.play();
</script>
</body>
但播放時(shí)，如果h5頁面與.m3u8的視頻源不在同一個(gè)域名，瀏覽器會遇到跨域問題。
網(wǎng)上有一種解決辦法，是修改srs的源碼，增加Access-Control-Alow-Orogin:*，但個(gè)人不推薦這種做法，一來把安全性降低了，容易造成盜播等安全問題。二是如果官網(wǎng)以后fix bug了，自己又得改一次。
更好的辦法，是在srs前面放一個(gè)nginx，做轉(zhuǎn)發(fā)來解決跨域問題。通常h5頁面，是通過nginx來訪問的，可以在nginx里，把特定視頻源路徑，轉(zhuǎn)發(fā)到后端srs服務(wù)器上，參考以下配置：
location /srs/ {
proxy_pass http://10.2.*.*:8080/;
add_header Cache-Control no-cache;
add_header Access-Control-Allow-Origin *;
}
這樣，請求http://localhost:81/srs/live/livestream.m3u8的請求，都會轉(zhuǎn)發(fā)到http://10.2.X.X:8080/live/livestream.m3u8上，跨域問題解決后，就可以正常播放了，參考下圖的效果：
tips: obs+srs支持多路視頻源同時(shí)直播，上圖中阿凡達(dá)+本機(jī)攝像頭，二路視頻同時(shí)推流/拉流，毫無影響。
h5播放http-flv
首先要感謝B站開源的flvjs，可以不依賴于flash player，純js+html實(shí)現(xiàn)flv的播放。
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 640px;
}
.urlInput {
display: block;
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 320px;
}
.controls {
display: block;
width: 100%;
text-align: left;
}
</style>
</head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="640" height="320">Your browser is too
old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<button onclick="flv_start()">開始</button>
<button onclick="flv_pause()">暫停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳轉(zhuǎn)</button>
</div>
<script src="./flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
enableWorker:true,
enableStashBuffer:false,
stashInitialSize:128,
url: 'http://localhost:81/srs/live/livestream.flv',
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flv_start();
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body>
</html>
當(dāng)然，如果播放端環(huán)境可控(比如pc端，且能確定安裝并允許支行flash player）直接用flash player播放flv效果更好。
