VUE 中CKplayer实现监听功能 (PC)

软件名称：CKplayer

软件版本：X1

官网下载:http://www.ckplayer.com/ 

 

第一步: 下载 插件http://www.ckplayer.com/ 

我这里的使用时直接用在pc上的 ,对于移动端的的可以绕路,但大致用法一致. 

第二步: 将文件放入index.html 文件中

第三步:在所需要的文件中引用 

在某个标签文件中放入一个id 此id名称对象下文>>>将被初始化 

  

 第四步:在mouted 钩子函数中调用自定义的方法

第六步:在initi()方法中进行初始化,并且动态的赋予地址

注意: option里参数 variable 跟 loaded 里的参数名 尽量用字母 不要加数字或者下划线 

不然可能会出现无法加载函数或者无法调用内部的方法

 /**
     *初始化加载
     * @returns {Promise<any>}
     */
    initi(){      
    let  videoObject= { //VGA
		poster: '../../../../static/record/j.jpg',//封面图片地址
		overspread:false,//是否让视频铺满播放器
        container: '#video', //“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'playerVga', //该属性必需设置，值等于下面的new chplayer()的对象         
        fluid: true,   
        autoplay: true, //自动播放
        live: true,
        flashplayer:true,
        loaded:'window.loadedHandlerVga', //当播放器加载后执行的函数	
        video: this.queryData.vga, //视频地址(必填) //此处为动态地址
        volume: 0, //默认音量，0-100之间
      };
   
      window.playerVga= new ckplayer(videoObject);
            // 监听全屏
			function fullHandler(){//h5状态下会调用该函数监听全屏切换
					window.fullHandler();
			}
			window.fullHandler=function(){//flashplayer状态下会调用该函数监听全屏切换
				console.log('已监听到全屏切换状态');
            };
            //点播>>>>全屏
			function timeHandler(time){//h5状态下为调用该函数监听当前播放时间
					window.timeHandler(time);
			}
			window.timeHandler=function(time){//flashplayer状态下为调用该函数监听当前播放时
				console.log('当前播放时间：'+time);
				console.log(window.playerVga.getMetaDate());
            };            

            //视频状态Vga
            function netStatusHandlerVga(state){//h5状态下为调用该函数监听当前播放时间
              window.netStatusHandlerVga(state);
            }
            //flashplayer状态下为调用该函数监听当前播放时
            window.netStatusHandlerVga=function (state){
              console.log('当前流状态Vga:',state)
                //此状态可依据http://www.hlc8.com/a.phpid=51BB35AA14844535B3FC5D8E003C8755
                //查看上述链接中的状态判断
            };
            
            //此处必须是挂载在全局才被调用 函数加载
			window.loadedHandlerVga=function(){  //已正确监听到播放器加载
					 window.player.addListener('full',fullHandler);   //监听全屏
                     window.player.addListener('time',timeHandler);   //点播时监听时间 
                    //此监听断流情况
				     window.playerVga.addListener('netStatus',netStatusHandlerVga);
			}

    },

目前做了三个监听: 

1.  全屏的监听,
2. 点播中的时间监听;需要注意的是 我此处是直播的的演示,只有点播才有时间,直播是没有时间的;
3. flash断流监听;

关于ckplayer在vue 中的使用大致如此,另外我还写总结了一篇ckplayer中如何动态给用户提示信息

链接:Ckplayer 中如何动态的给用户提示信息?