之前做监控视频直播,用到了ckplayer,ckplayer超酷网页播放器是一款用来在浏览器播放视频的插件工具,下面说一下简单的使用方法。
使用ckplayer需要的插件文件如下:
里面的文件每一个都不能少,否则会报错。
先说一下进行监控直播的原理:我们选用C2C智能监控器摄像头进行安装监控,此时想要获取监控直播视频只需要获取监控摄像头的HLS播放地址,每一个监控摄像头都有一个唯一的HLS播放地址,在ckplayer初始化时只要配置好监控摄像头的HLS播放地址即可播放相应的监控视频。
了解监控器播放视频的原理后,剩下的工作就很简单了,因为超酷播放器的配置也是很简单的,我们只需要引用插件文件,并在在页面上给视频播放器一个进行初始化的容器,然后获取这个容器并初始化视频播放器即可。
html页面如下:
<div class="row vision-h" id="videoDiv">
<div class="col-md-6"><div id="video1" style="width:100%;height: 100%;" class="vision-one"><img src="/image/vidio-no.png"/></div></div>
</div>
我们用id为video1的div容器做为初始化容器,接下来引用ckplayer.js,并在js页面进行播放器初始化,如下:
<script src="/lib/ckplayer/ckplayer.js"></script>
<script>
var flashvars;
flashvars={
f: '/lib/ckplayer/m3u8.swf',
a: 'http://hls.open.ys7.com/openlive/ed9131cc6d154c52a6240ba4ddb2671e.hd.m3u8',
c: 0,
p: 1,
s: 4,
lv: 1
};
var params = {bgcolor: '#FFF', allowFullScreen: true, allowScriptAccess: 'always', wmode: 'transparent'};
CKobject.embedSWF("/lib/ckplayer/ckplayer.swf", "video1", "video", "100%", "100%", flashvars, params);
</script>
上面代码中的“ed9131cc6d154c52a6240ba4ddb2671e.hd.m3u8”即为HLS播放地址,前面的路径一般根据监控摄像头品牌使用相同路径,一般播放地址分为两种,地址中带有hd字样的为高清播放,没有hd字样的地址为流畅播放,一般在项目中我们选择流畅播放。
如上的几行简单代码即可进行超酷浏览器的直播视频播放了。