ckplayer网页播放器简易教程

时间：2024-03-02 17:45:24

前言

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方法调用并渲染播放器。

 1 CKobject.embed(
 2             "ckplayer/ckplayer.swf",//注意：这里必须为“ckplayer.swf”文件，用于加载flash播放器
 3             "ckplayer",
 4             "ckplayer1",
 5             "600",
 6             "400",
 7             true,
 8             {
 9                 f:"video/1.mp4",
10                 c:0
11             },
12             [\'video/1.mp4->video/mp4\']
13             
14         );

CKobject是操作ckplayer播放器的主要对象，embed方法能够智能判断平台（html5/flashPlayer）调用合适的播放器进行播放

简单的解释下embed方法各个参数的用途

CKobject.embed(
\'flash播放器文件路径\',
\'容器ID（用于绑定到网页中）\',
\'播放器的ID（将播放器替换绑定到网页后，播放器id）\',
\'宽度，可以是百分比\',
\'高度，可以是百分比\',
优先调用设置（false=优先调用flash播放器，true=优先调用HTML5播放器）,
flash播放器的初始化参数（对象形式），以及HTML5初始化参数，比如默认播放/暂停等设置,
HTML5视频播放地址（数组形式），详细的可参考官网HTML5视频调用的说明
)

延伸一下:HTML5视频播放地址数组中的每一项都要遵循"视频路径->视频格式的MIME-type"，以下是html5支持的视频格式MIME-type对照表

格式MIME-type
MP4 video/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         CKobject.embed(
13             "ckplayer/ckplayer.swf",
14             "ckplayer",
15             "ckplayer1",
16             "600",
17             "400",
18             false,
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和ckplayer.xml里，以ckplayer.js为例分别是

1.视频加载前显示的logo文件

mylogo: \'logo.swf\',//logo资源
pm_mylogo: \'1,1,-100,-55\'

 

2.默认右上角一直显示的logo

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="http://www.ckplayer.com"}{font color="#FFFFFF" size="12"}这里可以放文字广告，播放器默认使用这里设置的广告内容，如果不想在这里使用可以清空这里的内容，如果想在页面中实时定义滚动文字广告内容，可以清空这里的内容，然后在页面中设置广告函数。{/font}{/a}\'),

修改为：

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中将以下函数关于开关灯、分享和调整的代码注释掉。

1 function ckcpt() {
2     var 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|\'; //调整大小和颜色的插件
6     return cpt;
7 }

如：

1 function ckcpt() {
2     var 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|\'; //调整大小和颜色的插件
6     return cpt;
7 }

原本的具有侧边栏的播放器，

修改后侧边栏和触发按钮都消失了

总结 

本教程到这里就结束了，相信能够带大家入个门。如果想了解更多功能，请参见官网。由于篇幅有限，没有介绍到的地方，还望大家原谅！

相关文章