使用Nginx(SRS)测试flv.js demo
参考
SRS大神杨成立
SRS(simple-rtmp-server)直播点播服务器
SRS Github
SRS HTTP FLV
CRtmpServer转推流到Nginx Rtmp及SRS（SimpleRtmpServer）的经历
通读SRS后的总结文档以及搭建直播平台的初次尝试
srs-win32
Nginx:
Nginx - Windows下Nginx初入门
Windows下Nginx的启动、停止等命令
Windows下Nginx+Tomcat整合的安装与配置（一）【精】
在Windows下搭建基于nginx的视频直播和点播系统
Linux&Windows搭建基于nginx的视频点播服务器
nginx-rtmp-win32
说起来很蛋疼，参照flv.js官方的Demo总是运行不起来，这连第一步都迈不出去真是郁闷，搞了一天最终跑起来Demo了……
一、搭服务器
弄个WINDOWS版本的Nginx吧，参照Linux&Windows搭建基于nginx的视频点播服务器，使用了nginx-rtmp-win32做了本地点播测试。具体步骤参照原文，为了节约时间，最好去CSDN下载作者那个DEMO
去网上随便下载一个flv文件改名为jay.flv放在video文件夹下，使用VLC播放软件，媒体菜单，打开网络串流：
rtmp://localhost/vod/test.flv
http://localhost/jay.flv
Paste_Image.png
复制一份jay.flv，命名为01.flv，放在同路径下。修改conf/nginx.conf配置文件，然后在nginx.exe路径下命令行运行nginx -s reload重新加载配置。
location /jay.flv{
root video;
}
location /01.flv{
root video;
}
VLC发现http://localhost/jay.flv和http://localhost/01.flv都可以播放。这说明location在匹配播放url成功后，会去相应的root下寻找url资源。
二、运行flv.js的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flv.js test</title>
</head>
<body>
<script src="flv.min.js"></script>
<video id="videoElement" width="800"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
//"isLive": true,
url: 'http://localhost/jay.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>
1.双击这个index.html会报错
Paste_Image.png
可以参照这个Not allowed to load local resource: blob:null/，我们需要把index.html部署到本地服务器上，用gulp搞定吧.可以参照Gulp Grunt,弄好后就能用
http://localhost:8080/来访问页面了.不过依然报错2.跨域
Paste_Image.png
关于跨域可以参考CORS——跨域请求那些事儿
为了解决nginx跨域,参考nginx中配置跨域支持功能
在nignx.conf的http.server中添加
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
然后nginx -s reload重新加载配置.好了,终于能看到flv文件啦
Paste_Image.png
三、附
end
