ckplayer网络播放器的简单教程

ckplayer是一个免费的视频插件，用于在网页上播放视频. 该插件具有高度兼容性，易于使用，并且具有完整的API. 此外，任何个人网站或商业网站都可以免费使用，而无需修改右键单击的版权.

以下内容将对ckplayer的整个使用过程进行简单的说明和演示（有关更，请访问官方网站）. 有兴趣的朋友可以再做一次.

开发工具: hbuilder

ckplayer版本: ckplayer v6.7（插件下载地址: 单击下载）

浏览器: chrome v48.0.2564.82

注意: ckplayer插件需要在服务器环境中运行，并且无法在本地环境中正常观看视频

*压缩包中需要的文件:

1. 在huilder中创建一个项目: “ PlayerDemo”

2. 解压缩ckplayer压缩包中的文件ckplayer播放器手机版，然后将所需的文件和文件夹复制到项目中

3. 创建视频目录视频并将其放入视频

4. 创建一个新的index.html文件以编写代码

创建的项目目录如下:

调用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类型”，以下是html5支持的视频格式MIME类型比较表

设置MIME类型的格式

MP4

视频/ mp4

WebM

视频/ webm

Ogg

视频/ 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>

通话结束后，将网页加载到浏览器中，效果如下（视频文件是从互联网上随机找到的，如果侵犯了版权，请与我联系）

这样，一个简单的调用就完成了. 如您所见，视频中出现的一些小问题，例如水印和文字广告可能并不令人满意. 接下来，我们将演示如何自定义视频播放器.

徽标的位置分别在ckplayer.js和ckplayer.xml中控制，以ckplayer.js为例.

1. 加载视频之前显示的徽标文件

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

2. 默认情况下，始终显示在右上角的徽标

logo: 'cklogo.png',//logo资源
pm_logo: '2,0,-100,20'

控制位置的四个值的含义是:

1. 水平对齐，左为0，中间为1，右为2

2. 垂直对齐，0是顶部，1是中等，2是底部

3. 水平偏移

4. 垂直偏移

其中，png或swf文件可同时用于mylogo和logo. 仔细观察ckplayer的核心文件和文件夹，您将发现没有用于mylogo和logo的两个属性的logo.swf和cklogo.png文件. 实际上，这些资源文件都放在style.swf文件中，只需将文件名更改为style.zip并打开它，就可以看到一系列文件. 其中包括logo.swf和cklogo.png文件. 图:

如果要修改徽标图像，则只需将要修改的图像放进去，然后将style.zip更改回style.swf（如有必要，请清除缓存），最后修改以上徽标或mylogo值等于您输入的值. 图片名称已足够.

如果您不想使用徽标，只需将徽标或mylogo设置为null.

mylogo: null

logo: null

运行如下:

您可以看到视频中“ ckplayer”的徽标水印不再存在.

打开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'

第九个参数与滚动文本的打开和关闭有关，0未打开，1已打开且未使用关闭按钮，2已打开且已使用关闭按钮，并在以下情况下加载打开滚动文字广告后，视频就会加载

如果将第九个参数修改为0，则很容易看到带有滚动文本的广告不再在运行文件中

如果要修改和显示滚动文字广告，则需要将设置的第九个参数更改为1（不带“×”关闭按钮）或2（带“×”关闭按钮），然后更改默认的advmarquee属性值被修改为自己的广告词（可能带有html标签）

默认值为:

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

修改为:

advmarquee: "好好学习，天天向上！",

效果显示:

如您所见，视频下方的滚动广告已更改为“努力学习ckplayer播放器手机版，每天学习！”，但这确实很丑陋！ ！原因是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 }

带有侧边栏的原始播放器，

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

本教程已在这里结束，我相信它可以带给大家. 如果您想了解更，请访问官方网站. 由于空间有限，我希望您能原谅您未介绍的地方！

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-246221-1.html