html5 手机 flv,H5直播系列六 flv.js demo

一、配置服务器

二、运行flv.js的demo

flv.js test

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();

}

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