html5 跨平台播放器,开源ckplayer 网页播放器, 跨平台(html5, mobile),flv, f4v, mp4, rt...

本文档详细介绍了如何使用CKplayer这款网页视频播放器进行自定义设置,包括修改或去掉播放器的前后置logo、滚动文字广告、分享插件以及控制栏和进度条的显示等。此外,还提供了设置视频加载失败提示和禁用进度条拖动等高级功能的步骤。
摘要由CSDN通过智能技术生成

CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的flv,f4v,mp4格式,同

时支持rtmp视频流格

式播放,此播放器的特点在于用户可以自己定义播放器的风格,诸如播放/暂停按钮,静音按钮,全屏按钮都是以外部图片接口形式调用,用户根据自己的需要制作

出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了,具体的各按钮的位置和底部背景的设置在

ckplayer/ckplayer.js里设置。

功能设置介绍

本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容:

1:修改或去掉播放器前置logo

2:修改或去掉右上角的logo

3:修改、关闭、设置滚动文字广告

4:去掉右边的开关灯分享插件

5:保留右边插件,但不用开关灯

6:分享功能的使用及注意点

7:前置广告顺序/随机播放或随机播放多个广告中的一个

8:让控制栏永远隐藏

9:锁定进度栏,让它跟着时间变化而变化,但是不能拖动

10:让视频离播放器下方的距离为0

11:视频加载失败时的提示文字和文字的位置设置

12:禁止用户拖动进度条

修改或去掉播放器前置logo

一步:把ckplayer/目录下的style.swf修改成style.zip,把自己做好的logo文件,官方默认使用的logo.swf,你也可以

使用logo.png.logo.jpg图片格式的,拖进style.zip里,然后再把style.zip改回style.swf第二步:打开ckplayer.js和ckplayer.xml

第一种:不使用前置logo

找到(ckplayer.js)mylogo: 'logo.swf',ckplayer.xml里对应的是logo.swf

分别设置成

mylogo:'null',null

第二种:修改前置logo

找到(ckplayer.js)mylogo: 'logo.swf',ckplayer.xml里对应的是logo.swf

替换成你的logo的名称

找到(ckplayer.js)pm_mylogo:

'1,1,-100,-55',ckplayer.xml里对应的是1,1,-100,-55

这里是修改位置的,关于修改位置的四个参数的作用和用法请参考:

修改后一定要清浏览器的缓存

修改或去掉右上角的logo

一步:把ckplayer/目录下的style.swf修改成style.zip,把自己做好的logo文件,官方默认使用的cklogo.png,你也

可以使用cklogo.swf(flash格式)或cklogo.jpg(图片格式)的,拖进style.zip里,然后再把style.zip改回

style.swf

第二步:打开ckplayer.js和ckplayer.xml

第一种:不使用logo

找到(ckplayer.js)logo:

'cklogo.png',ckplayer.xml里对应的是cklogo.png

分别设置成

logo:'null',null

第二种:修改logo

找到(ckplayer.js)logo:

'cklogo.png',ckplayer.xml里对应的是cklogo.png

替换成你的logo的名称

找到(ckplayer.js)pm_logo:

'2,0,-100,20',ckplayer.xml里对应的是2,0,-100,20

这里是修改位置的,关于修改位置的四个参数的作用和用法请参考

修改后一定要清浏览器的缓存

修改、关闭、设置滚动文字广告

关闭滚动文字广告的方法很简单

打开ckplayer.js和ckplayer.xml

找到setup:''参数和

第9个参数设置成0就可以关闭了

第9个参数的意思如下:

是否开启滚动文字广告,0是不开启,1是开启且不使用关闭按钮,2是开启并且使用关闭按钮,开启后将在加载视频的时候加载滚动文字广告

使用(修改)滚动文字广告

前提是你需要开启滚动文字广告,开启的方法如上面所说的

第一种方法:在ckplayer.js或ckplayer.xml里修改滚动文字广告

然后找到ckplayer.js中的advmarquee:'',

或ckplayer.xml中的

修改里面的内容,注意在ckplayer.xml里修改文字广告可以使用html语法,但是要注意的是把""换成"}"

第二种方法:在页面里实时展示文字广告

首先要把ckplayer.js中的advmarquee:''里的内容清空(对应的ckplayer.xml里的也清空)

然后在调用播放器的页面里设置一个js函数供播放器调用,代码如下:

Js代码

function

ckmarqueeadv(){

return

'广告内容'

;}

这里的 ckmarqueeadv函数也可以换成别的函数,修改方法是在ckplayer.js中的ckstyle()中的

calljs参数(ckplayer.xml里也有对应的)

修改后一定要清浏览器的缓存

文字向上滚动的方法设置

要注意二点:

一:ckplayer.js中的ckstyle()函数里的pm_advmarquee参数(ckplayer.xml里对应的是)

该参数的第10个值设置成1,就可以实现向上或向下滚动了

第6个值和第13个值要保持一致,你可以先设置成16测试一下

二:设置文字广告时需要在前面增加一个{br}换行符号,如{br}1{br}2

去掉右边的开关灯分享插件

ckplayer.js里

找到下面三行删除掉

cpt += 'right.swf,2,1,-75,-100,2,0|';//右边开关灯,调整,分享按钮的插件cpt +=

'share.swf,1,1,-180,-100,3,0|';//分享插件cpt +=

'adjustment.swf,1,1,-180,-100,3,0|';//调整大小和颜色的插件

ckplayer.xml里找到下面三行删除掉

right.swf,2,1,-75,-100,2,0 share.swf,1,1,-180,-100,3,0

adjustment.swf,1,1,-180,-100,3,0

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值