一、配置服务器
参考windows使用nginx配置rtmp,hls,httpflv
二、运行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
