ckplayer 手机端优化,解决控制条无法呼出、LOGO边距过大问题
分类 网站技术/村民张先生 发布于 2019-10-27 17:34
主要解决以下问题:
1、解决控制条自动隐藏后无法再呼出的问题(修改为不自动隐藏控制条,并将控制条下移38px,使之常显但不遮挡视频画面)。
复制 ckplayer.js 为 ckplayer.mobile.js ,手机版独立调用 ckplayer.mobile.js 。
查找:
click: true,
修改为:
click: false,
查找:
this.controlBarIsShow = true;
修改为:
this.controlBarIsShow = false;
查找:
this.controlBarHide();
注释掉:
//this.controlBarHide();
查找:
playerDiv.className = playerID;
在其下方增加:
playerDiv.style.cssText = "padding-bottom:38px;";
2、解决右上角LOGO在手机端显示过大的问题。
首先单独做一个缩小版的手机端LOGO,替换掉 ckplayer.mobile.js 中的原有LOGO。
接着解决边距过大问题。
查找:
this.getByElement(logoID).innerHTML = '<img src="' + logoFile + '" border="0">';
替换为(具体数值自行调试):
this.getByElement(logoID).innerHTML = '<img src="' + logoFile + '" border="0" style="margin-top:-20px">';
查找:
height: '30px', lineHeight: '30px', color: '#FFFFFF', fontFamily: 'Arial', fontSize: '28px', textAlign: 'center', position: 'absolute', float: 'left', left: '-1000px', top: '20px', zIndex: '996', filter: 'alpha(opacity:0.8)', opacity: '0.8', cursor: 'default'
替换为:
position: 'absolute', float: 'left', left: '-1000px', zIndex: '901', filter: 'alpha(opacity:0.8)', opacity: '0.8', cursor: 'default'
查找:
left: parseInt(this.PD.offsetWidth - this.CB['logo'].offsetWidth - 20) + 'px', top: '20px'
替换为:
left: parseInt(this.PD.offsetWidth - this.CB['logo'].offsetWidth - 2) + 'px', top: '10px'
欢迎谈谈你的看法(无须登录) *正文中请勿包含"http://"否则将被拦截