ckplayer⽹页播放器简易教程
前⾔
ckplayer是⼀款在⽹页上播放视频的免费视频插件，该插件兼容性强、使⽤简单、api齐全。另外，任何个⼈⽹站或商业⽹站在不修改右键版权的基础上都可以免费使⽤。下⾯将对ckplayer的整个使⽤过程做⼀遍简单的说明与演⽰（想了解更多功能请访问）。有兴趣的朋友可以跟着做⼀遍。
本⽂涉及环境
开发⼯具：hbuilder
ckplayer版本：ckplayer v6.7(插件下载地址：)
浏览器：chrome v48.0.2564.82
注意：ckplayer插件需要在服务器环境中运⾏，在本地环境将不能正常观看视频
项⽬部署
*压缩包中需要⽤到的⽂件：
1. 在huilder中建⽴项⽬："PlayerDemo"
2. 解压ckplayer压缩包中的⽂件，并将需要⽤到的⽂件及⽂件夹复制到项⽬中
3.创建视频⽬录video并放⼊视频
4. 新建index.html⽂件⽤于编写代码
创建的项⽬⽬录如下：
调⽤ckplayer播放视频
最常⽤的调⽤ckpalyer播放器的流程⼤体可以分为以下⼏个部分：
在index.html中
1.引⽤ckplayer.js核⼼js⽂件ckplayer.js
<script src="ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script>
2.在需要使⽤播放器的位置放置⼀个带有id的div元素，id便于将播放器绑定到该元素。
<div id="ckplayer"></div>
3.在js代码中，⽤CKobject对象的embed⽅法调⽤并渲染播放器。
bed(
2 "ckplayer/ckplayer.swf",//注意：这⾥必须为“ckplayer.swf”⽂件，⽤于加载flash播放器
3 "ckplayer",
4 "ckplayer1",
5 "600",
6 "400",
7true,
8 {
9 f:"video/1.mp4",
10 c:0
11 },
12 ['video/1.mp4->video/mp4']
13
14 );
CKobject是操作ckplayer播放器的主要对象，embed⽅法能够智能判断平台（html5/flashPlayer）调⽤合适的播放器进⾏播放
简单的解释下embed⽅法各个参数的⽤途
'flash播放器⽂件路径',
'容器ID（⽤于绑定到⽹页中）',
'播放器的ID（将播放器替换绑定到⽹页后，播放器id）',
'宽度，可以是百分⽐',
'⾼度，可以是百分⽐',
优先调⽤设置（false=优先调⽤flash播放器，true=优先调⽤HTML5播放器）,
flash播放器的初始化参数（对象形式），以及HTML5初始化参数，⽐如默认播放/暂停等设置,
HTML5视频播放地址（数组形式），详细的可参考官⽹HTML5视频调⽤的说明
)
延伸⼀下:HTML5视频播放地址数组中的每⼀项都要遵循"视频路径->视频格式的MIME-type"，以下是html5⽀持的视频格式MIME-type对照表
格式MIME-type
MP4video/mp4
WebM video/webm
Ogg video/ogg
index.html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8"/>
5<title>ckplayer演⽰</title>
6</head>
7<body>
8<div id="ckplayer"></div><!--⽤于替换播放器-->
9</body>
10<script src="ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script>
11<script type="text/javascript">
12 bed(
13 "ckplayer/ckplayer.swf",
14 "ckplayer",
15 "ckplayer1",
16 "600",
17 "400",
18false,
19 {
20 f:"video/1.mp4",
21 c:0
22 },
23 ['video/1.mp4->video/mp4']
24
25 );
26</script>
27</html>
调⽤完成后，在浏览器上加载⽹页，效果如下（该视频⽂件是我从⽹上随便的，如有违权，请联系我）
这样，⼀个简单的调⽤就完成了。⼤家可以看到，视频中出现的⽔印和⽂字⼴告等等⼀些⼩⼩的问题，可能不太令⼈满意。接下来就演⽰下如何⾃定义我们的视频播放器。⾃定义播放器
修改logo
logo的位置控制在ckplayer.js和l⾥，以ckplayer.js为例分别是
1.视频加载前显⽰的logo⽂件
mylogo: 'logo.swf',//logo资源
pm_mylogo: '1,1,-100,-55'
2.默认右上⾓⼀直显⽰的logo
javascript免费教程logo: 'cklogo.png',//logo资源
pm_logo: '2,0,-100,20'
控制位置的四个值的意思分别是：
1、⽔平对齐⽅式，0是左，1是中，2是右
2、垂直对齐⽅式，0是上，1是中，2是下
3、⽔平偏移量
4、垂直偏移
其中，mylogo和logo都可以使⽤png或swf⽂件。仔细观察ckplayer的核⼼⽂件及⽂件夹你会发现，⾥⾯没有mylogo和logo这两个属性所⽤的logo.swf及cklogo.png⽂件。其实这些资源⽂件被放在了style.swf⽂件中了，只需要将其⽂件名改成style.zip并打开，就可看到⼀系列⽂件。其中就包括logo.swf和cklogo.png⽂件。附图：
如果想要修改logo图⽚，只需要将要修改的图⽚放进去，然后将style.zip改回style.swf（必要时请清理缓存），最后把上述logo或者mylogo值修改成⾃⼰放⼊的图⽚名即可。如果不想要logo，只需要将logo或mylogo置为null即可。
mylogo: null
logo: null
运⾏如下：
可以看到，视频中的“ckplayer”字样的logo⽔印已经不存在了。
修改滚动⽂字⼴告
滚动⽂字⼴告的开启与关闭
打开ckplayer.js，可以看到这么⼀条语句
setup: '1,1,1,1,1,2,0,1,2,0,0,1,200,0,2,1,0,1,1,1,2,10,3,0,1,2,3000,0,0,0,0,1,1,1,1,1,1,250,0,90,0,0,0'
其中第9个参数是和滚动⽂字的开启与关闭有关的，0是不开启，1是开启且不使⽤关闭按钮，2是开启并且使⽤关闭按钮，开启后将在加载视频的时候加载滚动⽂字⼴告
如果将第9个参数修改为0，运⾏⽂件很容易看到滚动⽂字的⼴告已经不在了
修改滚动⽂字⼴告
如果想要修改并显⽰滚动⽂字⼴告，需要将setup的第九个参数改为1（不带“×”形式的关闭按钮）或2（带“×”形式的关闭按钮），并将默认的advmarquee属性值修改成⾃⼰的⼴告
词（可以带有html标签）
默认为：
advmarquee: escape('{a href="www.ckplayer"}{font color="#FFFFFF" size="12"}这⾥可以放⽂字⼴告，播放器默认使⽤这⾥设置的⼴告内容，如果不想在这⾥使⽤可以清空这⾥的内容，如果想在页⾯中实时定义滚动⽂字⼴告内容，可以清修改为：
advmarquee: "好好学习，天天向上！",
效果展⽰：
可以看到，视频下⽅的滚动⼴告改成了⾃⼰定义的“好好学习，天天向上！”，但是，真丑！！究其原因，
是ckplayer⾃作聪明地给滚动⼴告加上了发光滤镜、、、好端端的⼴告，
加这么难看的滤镜⼲啥，去掉！
修改滚动⽂字⼴告发光滤镜
在ckplayer.js中，滚动⽂字发光滤镜⽤pm_glowfilter属性控制
默认属性值
pm_glowfilter:'1,0x01485d, 100, 6, 3, 10, 1, 0, 0',
该属性各参数详解
1、是否使⽤发光滤镜，0是不采⽤，1是使⽤
2、(default = 0xFF0000) — 光晕颜⾊，采⽤⼗六进制格式 0xRRGGBB。默认值为 0xFF0000
3、(default = 100) — 颜⾊的 Alpha 透明度值。有效值为 0 到 100。例如，25 设置透明度为 25%
4、(default = 6.0) — ⽔平模糊量。有效值为 0 到 255（浮点）。 2 的乘⽅值（如 2、4、8、16 和 32）经过优化，呈现速度⽐其它值更快
5、(default = 6.0) — 垂直模糊量。有效值为 0 到 255（浮点）。 2 的乘⽅值（如 2、4、8、16 和 32）经过优化，呈现速度⽐其它值更快
6、(default = 2) — 印记或跨页的强度。该值越⾼，压印的颜⾊越深，⽽且发光与背景之间的对⽐度也越强。有效值为 0 到 255
7、(default = 1) — 应⽤滤镜的次数
8、(default = 0) — 指定发光是否为内侧发光。值 1 指定发光是内侧发光。值 0 指定发光是外侧发光（对象外缘周围的发光）
9、(default = 0) — 指定对象是否具有挖空效果。值为 1 将使对象的填充变为透明，并显⽰⽂档的背景颜⾊
可以看到，当pm_glowfilter第⼀个参数为0时，就会关闭滤镜。所以修改pm_glowfilter第⼀个参数为0
pm_glowfilter:'0,0x01485d, 100, 6, 3, 10, 1, 0, 0',
效果显⽽易见
由于pm_glowfilter参数⽐较多，这⾥就不⼀⼀演⽰修改效果，更多设置效果还需要⼤家⾃⼰尝试。
删除右侧窗⼝
如果感觉右边的开关灯、分享和调整窗⼝碍眼的话，可以在ckplayer.js中将以下函数关于开关灯、分享
和调整的代码注释掉。
1function ckcpt() {
2var cpt = '';
3 cpt += 'right.swf,2,1,0,0,2,0|'; //右边开关灯，调整，分享按钮的插件
4 cpt += 'share.swf,1,1,-180,-100,3,0|'; //分享插件
5 cpt += 'adjustment.swf,1,1,-180,-100,3,0|'; //调整⼤⼩和颜⾊的插件
6return cpt;
7 }
如：
1function ckcpt() {
2var cpt = '';
3//cpt += 'right.swf,2,1,0,0,2,0|'; //右边开关灯，调整，分享按钮的插件
4//cpt += 'share.swf,1,1,-180,-100,3,0|'; //分享插件
5//cpt += 'adjustment.swf,1,1,-180,-100,3,0|'; //调整⼤⼩和颜⾊的插件
6return cpt;
7 }
原本的具有侧边栏的播放器，
修改后侧边栏和触发按钮都消失了
总结
本教程到这⾥就结束了，相信能够带⼤家⼊个门。如果想了解更多功能，请参见。由于篇幅有限，没有
介绍到的地⽅，还望⼤家原谅！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论