ckplayer插件使用

最新推荐文章于 2024-06-14 11:29:50 发布

静雄桑

最新推荐文章于 2024-06-14 11:29:50 发布

阅读量5.3k

点赞数

分类专栏： JavaScript 文章标签： ckplayer 视频直播视频插件

本文链接：https://blog.csdn.net/qq_36173194/article/details/79271594

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

之前做监控视频直播，用到了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字样的地址为流畅播放，一般在项目中我们选择流畅播放。

如上的几行简单代码即可进行超酷浏览器的直播视频播放了。