ckplayer 项目实际应用代码整理，支持标清，高清，超清切换！

Posted 2020-08-10 别安驹

ckplayer是个免费，小巧，功能强大的视频播放器，前段时间有个项目需要做个收费视频播放的功能，于是就用了ck，目前项目已经弄完，完美支持pc和手机端的播放，重要的是可以支持清晰度切换，最后加了个是否购买权限的功能，其实总体来说开发难度较小，如果说有难度的话还是要在于处理视频安全性上下些功夫，加密视频地址，加密视频名称这些，防止拔取链接之类。话不多说代码走起：

1，首先做些准备工作，在页面构造这个播放器之前需要引入js，以及播放器的相关文件 下载 传送门：

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!--播放器核心包--><script type="text/javascript" src="js/player/ckplayer.js"></script>
<!--播放器关灯插件--><script type="text/javascript" src="js/offlights.js"></script> 

2，准备工作做好后，页面开始渲染播放器，进行交互，如下，配置过程有什么疑问可以直接看这个 Ckplayer手册：

<script type="text/javascript">
    function loadedHandler(){    
        ckmarqueeadv();
    }
    var _nn=0;
    function ckmarqueeadv(){
        str = ‘{a target="_blank" href="http://www.bieanju.com"}{font color="#00EEF0" size="12"}别安驹吉他学院温馨提示：您当前正在学习吉他谱《{$video_info.title}》目前已有{$video_info.watch}人学习过此视频！http://www.bieanju.com/{/font}{/a}‘
        return str;
    }
    function playerstop(){
        var html =‘<div class="Adver"><embed type="application/x-shockwave-flash" id="over" src="js/player/playover.swf" height="240" width="560" wmode="opaque"></embed></div>‘;
        $(".Advertisement").html(html);
    }
    function player(){
        $(".Advertisement").html("");
    }
    function bajplayer(){
        var flashvars={
                f:"获取视频信息地址?getVideoInfoid={$video_info.id}",//视频地址
                a:‘{$video_info.id}‘,//调用时的参数，只有当s>0的时候有效
                s:‘2‘,//调用方式，0=普通方法（f=视频地址），1=网址形式,2=xml形式，3=swf形式(s>0时f=网址，配合a来完成对地址的组装)
                c:‘0‘,//是否读取文本配置,0不是，1是
                x:‘‘,//调用配置文件路径，只有在c=1时使用。默认为空调用的是ckplayer.xml
                i:‘http://www.ckplayer.com/images/loadimg3.jpg‘,//初始图片地址
                d:‘/player/playpause.swf‘,//暂停时播放的广告，swf/图片,多个用竖线隔开，图片要加链接地址，没有的时候留空就行
                u:‘‘,//暂停时如果是图片的话，加个链接地址
                r:‘‘,//前置广告的链接地址，多个用竖线隔开，没有的留空
                t:‘10|10‘,//视频开始前播放swf/图片时的时间，多个用竖线隔开
                y:‘‘,//这里是使用网址形式调用广告地址时使用，前提是要设置l的值为空
                z:‘http://www.ckplayer.com/down/buffer.swf‘,//缓冲广告，只能放一个，swf格式
                e:‘0‘,//视频结束后的动作，0是调用js函数，1是循环播放，2是暂停播放并且不调用广告，3是调用视频推荐列表的插件，4是清除视频流并调用js功能和1差不多，5是暂停播放并且调用暂停广告
                v:‘80‘,//默认音量，0-100之间
                p:‘1‘,//视频默认0是暂停，1是播放，2是不加载视频
                h:‘4‘,//播放http视频流时采用何种拖动方法，=0不使用任意拖动，=1是使用按关键帧，=2是按时间点，=3是自动判断按什么(如果视频格式是.mp4就按关键帧，.flv就按关键时间)，=4也是自动判断(只要包含字符mp4就按mp4来，只要包含字符flv就按flv来)
                q:‘‘,//视频流拖动时参考函数，默认是start
                m:‘‘,//让该参数为一个链接地址时，单击播放器将跳转到该地址
                o:‘‘,//当p=2时，可以设置视频的时间，单位，秒
                w:‘‘,//当p=2时，可以设置视频的总字节数
                g:‘‘,//视频直接g秒开始播放
                j:‘‘,//跳过片尾功能，j>0则从播放多少时间后跳到结束，<0则总总时间-该值的绝对值时跳到结束
                k:‘30|60‘,//提示点时间，如 30|60鼠标经过进度栏30秒，60秒会提示n指定的相应的文字
                n:‘这是提示点的功能，如果不需要删除k和n的值|提示点测试60秒‘,//提示点文字，跟k配合使用，如 提示点1|提示点2
                wh:‘‘,//宽高比，可以自己定义视频的宽高或宽高比如：wh:‘4:3‘,或wh:‘1080:720‘
                lv:‘0‘,//是否是直播流，=1则锁定进度栏
                loaded:‘loadedHandler‘,//当播放器加载完成后发送该js函数loaded
                my_url:encodeURIComponent(window.location.href)//本页面地址
                };
            /* 自动处理播放器宽高 */
            var getwidth  =    $(window).width();
            var getheight = $(window).height();
            var w = getwidth - 361 < 425 ? 425 : getwidth - 340;
            var h = w*0.75 > 656 ? w*0.75-140 : (w*0.75)+50;
            if(h > (getheight-100)){
                h = getheight-115;            
            }
            setRightHeight();
            var params={bgcolor:‘#FFF‘,allowFullScreen:true,allowScriptAccess:‘always‘};//这里定义播放器的其它参数如背景色（跟flashvars中的b不同），是否支持全屏，是否支持交互
            CKobject.embedSWF(‘js/player/player.swf‘,‘player‘,‘ckplayer_a1‘,w,h,flashvars,params);
    }
    //开关灯
     var box = new LightBox();
    function closelights(){
        //关灯
        box.Show();
        CKobject._K_(‘zcplayer‘).style.width=‘940px‘;
        CKobject._K_(‘zcplayer‘).style.height=‘550px‘;
        CKobject.getObjectById(‘ckplayer_a1‘).width=940;
        CKobject.getObjectById(‘ckplayer_a1‘).height=550;
    }
    //开灯
    function openlights(){
        box.Close();
        CKobject._K_(‘zcplayer‘).style.width=‘600px‘;
        CKobject._K_(‘zcplayer‘).style.height=‘400px‘;
        CKobject.getObjectById(‘ckplayer_a1‘).width=600;
        CKobject.getObjectById(‘ckplayer_a1‘).height=400;
    }
    function changePrompt(){
        CKobject.getObjectById(‘ckplayer_a1‘).promptUnload();//卸载掉目前的
        CKobject.getObjectById(‘ckplayer_a1‘).changeFlashvars(‘{k->10|20|30}{n->重设提示点一|重设提示点二|重设提示点三}‘);
        CKobject.getObjectById(‘ckplayer_a1‘).promptLoad();//重新加载
    } 
    function setRightHeight(){
        var x = $(window).height()-7;    //
        $("#edu_lesson_right_pare").css(‘height‘,x-45+‘px‘);
        $(".Scroller-Container").css(‘height‘,x-45+‘px‘);
        $("#edu_less_right").css(‘height‘,x-45+‘px‘);
        $(".vs_course_main_r").css(‘height‘,x-45+‘px‘);
        $(".vs_course_main").css(‘height‘,x-45+‘px‘);
    }
    $(function(){
        $(‘#over‘).click(function(){
            alert(‘asdf‘);
        })
    })
</script>

3，完成第一和第二步后下一步就是前段页面的显示后后台的视频信息处理：

前台显示
<body onload="zcplayer();">
    <div id="ckplayer"></div>
</body>

后台程序处理
/* 视频提取 */
        public function getVideoInfo() {
            $info = D(‘VideoView‘)->details($this->_get(‘id‘));
            $pat =  $info[id];
            header("Content-Type:text/html; charset=utf-8");
            header(‘Content-Type:application/xml; charset=utf-8‘);
            $sitemap .= "<?xml version=‘1.0‘ encoding=‘UTF-8‘?>";
            $sitemap .= "<player>";
//             $sitemap .= "<DengBox>";
            $sitemap .= "<flashvars>{k->}{n->}}{h->2}{a->$pat}{defa->$info[id]|$info[id]|$info[id]}{deft->标清|高清|超清}{f->".__URL__."/getVideoInfo?id=[".‘$pat‘."]}}</flashvars>";
            $sitemap .= "<video><file><![CDATA[/Uploads/video/".$info[‘video_name‘]."]]></file><size>".($info[‘filesize‘]*1024)."</size><seconds>".$info[‘time‘]."</seconds></video>";
            $sitemap .= "</player>";
//             $sitemap .= "</DengBox>";
            echo $sitemap;
        }