软件名称:CKplayer
软件版本:X1
第一步: 下载 插件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);
}
},
目前做了三个监听:
- 全屏的监听,
- 点播中的时间监听;需要注意的是 我此处是直播的的演示,只有点播才有时间,直播是没有时间的;
- flash断流监听;