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方法调用并渲染播放器。
CKobject.embed(
"ckplayer/ckplayer.swf",//注意：这里必须为“ckplayer.swf”文件，用于加载flash播放器
"ckplayer",
"ckplayer1",
"600",
"400",
true,
{
f:"video/1.mp4",
c:0
},
['video/1.mp4->video/mp4'] );
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ckplayer演示</title>
</head>
<body>
<div id="ckplayer"></div><!--用于替换播放器-->
</body>
<script src="ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
CKobject.embed(
"ckplayer/ckplayer.swf",
"ckplayer",
"ckplayer1",
"600",
"400",
false,
{
f:"video/1.mp4",
c:0
},
['video/1.mp4->video/mp4'] );
</script>
</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中将以下函数关于开关灯、分享和调整的代码注释掉。
function ckcpt() {
var cpt = '';
cpt += 'right.swf,2,1,0,0,2,0|'; //右边开关灯，调整，分享按钮的插件
cpt += 'share.swf,1,1,-180,-100,3,0|'; //分享插件
cpt += 'adjustment.swf,1,1,-180,-100,3,0|'; //调整大小和颜色的插件
return cpt;
}
如：
function ckcpt() {
var cpt = '';
//cpt += 'right.swf,2,1,0,0,2,0|'; //右边开关灯，调整，分享按钮的插件
//cpt += 'share.swf,1,1,-180,-100,3,0|'; //分享插件
//cpt += 'adjustment.swf,1,1,-180,-100,3,0|'; //调整大小和颜色的插件
return cpt;
}
原本的具有侧边栏的播放器，
修改后侧边栏和触发按钮都消失了
总结
本教程到这里就结束了，相信能够带大家入个门。如果想了解更多功能，请参见官网。由于篇幅有限，没有介绍到的地方，还望大家原谅！
ckplayer网页播放器简易教程的更多相关文章
- 推荐下：开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！
视频播放, 原本是想h5 自带视频播放,使用很简单,结果现实很骨感. <video controls="controls" preload="auto" ...
- （转载）开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！
文章链接:http://justcoding.iteye.com/blog/2110275 CKplayer,其全称为超酷flv播放器,它是一款用于网页上播放视频的软件,支持的格式有:http协议上的 ...
- 开源ckplayer 网页播放器去logo去广告去水印修改
功能设置介绍 本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容: 1:修改或去掉播放器前置logo 2:修改或去掉右上角的logo 3:修改.关闭.设置滚动文字广告 4:去掉右边的开关灯分享 ...
- video兼容ie，ckplayer网页播放器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 建站技能get（1）— Asp.net MVC快速集成ckplayer网页视频播放器
故事背景大概是这样的,我厂两年前给山西晋城人民政府做了一个门户网站(地址:http://jccq.cn/),运行了一年多固若金汤,duang的有一天市场部门过来说,新闻管理模块带视频的内容播放不了了. ...
- .net C# 网页播放器 支持多种格式 媒体播放器 播放器 代码
.avi格式代码片断如下:<object id='video' width='400' height='200' border='0' classid='clsid:CFCDAA03-8BE4- ...
- 基于ffmpeg网络播放器的教程与总结
基于ffmpeg网络播放器的教程与总结 一. 概述 为了解决在线无广告播放youku网上的视频.(youku把每个视频切换成若干个小视频). 视频资源解析可以从www.flvcd. ...
- 搭建rtmp直播流服务之4:videojs和ckPlayer开源播放器二次开发(播放rtmp、hls直播流及普通视频)
前面几章讲解了使用 nginx-rtmp搭建直播流媒体服务器; ffmpeg推流到nginx-rtmp服务器; java通过命令行调用ffmpeg实现推流服务; 从数据源获取,到使用ffmpeg推流, ...
- 全平台网页播放器兼容H5与Flash还带播放列表
许久不发文了,2018年第一篇文章,写点干货--关于网页播放器的问题.嗯,实际上我是在52破解首发的,当做新人贴. 目前来说,网页播放器不少,随便找找都能找到一大堆,然而好用的就那么几个,比如ckpl ...
随机推荐
- Han Move(细节题)
Problem 1609 - Han Move Time Limit: 1000MS Memory Limit: 65536KB Total Submit: 620 Accepted: 1 ...
- 第五章 Logistic回归
第五章 Logistic回归 假设现在有一些数据点,我们利用一条直线对这些点进行拟合(该线称为最佳拟合直线),这个拟合过程就称作回归. 为了实现Logistic回归分类器,我们可以在每个特征上都乘以一 ...
- [网络流最大流经典][uva 11082][矩阵解压]
题目大意 分析 #include <cstdio> #include <cstdlib> #include <cmath> #include <cstring ...
- mysql密码忘记如何处理
1,修改/etc/my.cnf添加添加skip-grant参数,重启mysql. 2,登录mysql mysql -uroot 3, 更新user中root的密码 use mysql; upd ...
- 伪元素::selection(怎么修改网页中被选中文本的样式)
当我们用鼠标选中一段文字的时候我们会发现文字的颜色和背景色都改变了, 有时候设计给这种选中状态设计了其他的样式,那么我们怎么来自定义选中的文本的样式呢? 用::selection <p>我 ...
- android第一天错误
1.自己写的activity并在AndroidManifest.xml中注册 在模拟机上运行时出现 No Launcher activity found! The launch will only s ...
- XPath语法 在C#中使用XPath示例
XPath可以快速定位到Xml中的节点或者属性.XPath语法很简单,但是强大够用,它也是使用xslt的基础知识. 示例Xml: <?xml version="1.0" en ...
- select语句返回结果的顺序问题 .
今天看到论坛上一个朋友的回帖内容,突然意识到自己好像从来没对SELECT语句做过任何思考,即便SELECT是平时使用最多的语句.自己建了两个测试表,内容如下: SQL> conn scott/t ...
- 简便数据库——ORMLite框架
一.创建DataBase //使用 Singleton 避免產生多個實例(instance),要注意 thread safe 這邊使用雙重鎖定(Double-checked locking) 使用 T ...
- nginx上传模块nginx_upload_module使用
1.安装模块 1 cd /data/software 2 wget http://www.grid.net.ru/nginx/download/nginx_upload_module-2.0.12.t ...