开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！

开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！

博客分类： 

Javascript /Jquery / Bootstrap / Web 

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里对应的是<mylogo>logo.swf</mylogo>

 

分别设置成

mylogo:'null',

<mylogo>null</mylogo>

 

第二种：修改前置logo

找到(ckplayer.js)mylogo: 'logo.swf',

ckplayer.xml里对应的是<mylogo>logo.swf</mylogo>

替换成你的logo的名称

 

找到(ckplayer.js)pm_mylogo: '1,1,-100,-55',

ckplayer.xml里对应的是<pm_mylogo>1,1,-100,-55</pm_mylogo>

 

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

 

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

 

修改或去掉右上角的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里对应的是<logo>cklogo.png</logo>

 

分别设置成

logo:'null',

<logo>null</logo>

 

第二种：修改logo

找到(ckplayer.js)logo: 'cklogo.png',

ckplayer.xml里对应的是<logo>cklogo.png</logo>

 

替换成你的logo的名称

找到(ckplayer.js)pm_logo: '2,0,-100,20',

ckplayer.xml里对应的是<pm_logo>2,0,-100,20</pm_logo>

 

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

 

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

 

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

 

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

打开ckplayer.js和ckplayer.xml

找到setup:''参数和<setup></setup>

 

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

第9个参数的意思如下：

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

 

使用（修改）滚动文字广告

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

 

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

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

或ckplayer.xml中的<advmarquee></advmarquee>

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

 

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

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

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

Js代码  


<script>function ckmarqueeadv(){return '广告内容';}</script>  

 

这里的 ckmarqueeadv函数也可以换成别的函数，修改方法是在ckplayer.js中的ckstyle()中的 calljs参数（ckplayer.xml里也有对应的）

 

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

 

文字向上滚动的方法设置

要注意二点：

一：ckplayer.js中的ckstyle()函数里的pm_advmarquee参数（ckplayer.xml里对应的是<pm_advmarquee></pm_advmarquee>）

该参数的第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里找到下面三行删除掉

<cpt>right.swf,2,1,-75,-100,2,0</cpt><!--右边开关灯，调整，分享按钮的插件-->

<cpt>share.swf,1,1,-180,-100,3,0</cpt><!--分享插件-->

<cpt>adjustment.swf,1,1,-180,-100,3,0</cpt><!--调整大小和颜色的插件--

 

再到style.swf(改成style.zip)里把right.swf,share.swf,adjustment.swf这三个插件删除掉

 

保留右边插件，但不用开关灯

ckplayer.js里：cpt_lights:'0',

ckplayer.xml里：<cpt_lights>0</cpt_lights>

 

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

 

分享功能的使用及注意点

我们假设你的ckplayer是放在网站根目录下的，比如你的播放器地址是
http://www.你的域名.com/ckplayer/ckplayer.swf    

注意这个路径

 

下面开始设置
第一步：
http://www.你的域名.com/ckplayer/ckplayer.js中找到cpt_share:''参数

改成cpt_share:'http://www.你的域名.com/ckplayer/share.xml',

 
http://www.你的域名.com/ckplayer/ckplayer.xml中找到<cpt_share></cpt_share>
改成
http://www.你的域名.com/ckplayer/share.xml
 

第二步：
打开http://www.你的域名.com/ckplayer/share.xml这个文件

找到参数里面的

{embed src="http://www.你的域名.com/ckplayer/ckplayer.swf"

注意这里要设置成绝对路径
http://www.你的域名.com/ckplayer/ckplayer.swf?[$share]
 这里也要用绝对路径

<share_path>ckplayer/share/</share_path>

改成绝对地址    

 <share_path>http://www.你的域名.com/ckplayer/share/</share_path>

 主要就是改路径为http开头的路径，因为站外访问必需要有全路径才能识别

<share_permit>0</share_permit>

设置好该参数，如果你的视频站没有视听许可证，则设置成0，如果有，则设置成1

<share_flashvars>

 f,my_url,my_pic,a

 </share_flashvars>

share_flashvars参数的功能是指分享时，分享出去的flashvars里的参数，这里一定要注意，因为根据你调用视频的方式，需要选择不同的参数分享，已确保在站外再一次分享时还是能够播放的。

 

第三步：  

给网站增加一个跨域策略文件，关于这个文件的说明可以自已baidu一下 

简单的使用就是下载官网的直接放到自己网站根目录下 
http://www.ckplayer.com/crossdomain.xm

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

 

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

第一步，你的前置广告要设置成多个广告地址的形式

比如你的广告地址是1.swf和2.flv

那么设置方式如下

在flashvars里的代码（其它形式的调用只要对应就行了）

Js代码  


var flashvars={  

  ...  

  l:'1.swf|2.flv',  

  r:'|http://www.ckplayer.com',  

  t:'10|10',  

  ...  

  };  

 

l的值里放了二个广告，以竖线隔开

因为2.flv是视频，需要给它个链接地址所以在r里设置了一个空的地址和一个链接地址（以官网地址为例），中间以竖线隔开

t是设置的播放时间，都是10秒，共放20秒

 

第二步，打开ckplayer.js找到setup:''这个参数，或打开ckplayer.xml找到<setup></setup>这个参数

注意第7个参数

这里的设置有3+种。不同的设置不同的意思

0：是把多个前置广告设置成顺序播放

1：是把多个前置广告设置成随机的顺序播放

2：随机取所有广告中的一个进行播放

3：随机取所有广告中的二个进行播放

...

以此类推

 

让控制栏永远隐藏

找到

ckplayer.js中的setup:''的第29个参数

ckplayer.xml中的<setup></setup>的第29个参数

设置成2

 

该参数的意思法

0:是正常状态，此时控制栏将会根据setup中的第25个参数来运行。

1:是控制栏默认隐藏，播放状态下鼠标经过播放器显示控制栏，此时只有当鼠标经过播放器时，控制栏才会出来，至后会按照setup的第25个参数来运行

2:是一直隐藏控制栏

 

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

找到

ckplayer.js中的setup:''的第26个参数

ckplayer.xml中的<setup></setup>的第26个参数

设置成0

 

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

style.swf改成style.zip

把里面的style.xml文件拖出来打开

找到

<pm_video>0,0,0,35,0x000000,0,0,0,0,0</pm_video>

设置第四个参数（上面的是35），设置成0

这个参数里各个值的意思如下

视频固定区域

1、控制栏未隐藏时左边预留宽

2、控制栏未隐藏时上面预留高度

3、控制栏未隐藏时右边预留宽度

4、控制栏未隐藏时下面预留高度

5、该区域背景颜色

6、该区域背景透明度

7、控制栏隐藏时左边预留宽

8、控制栏隐藏时上面预留高度

9、控制栏隐藏时右边预留宽度

10、控制栏隐藏时下面预留高度

 

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

修改文字在：language.xml里的<pr_noload>{font color='#FFFFFF' face='NSimSun'}加载失败{/font}</pr_noload>项

修改文字位置是在style.swf(改成style.zip)里的style.xml里的<pm_load>1,1,-30,10,0,200,0</pm_load>

因为该处是用来显示加载进度，兼职显示加载失败的提示文字的。各值的意思如下：

1、水平对齐方式，0是左，1是中，2是右

2、垂直对齐方式，0是上，1是中，2是下

3、水平偏移量

4、垂直偏移量

5、文本对齐方式：0是左对齐，1是中间对齐，2是右对齐，3是默认对齐（相当于左对齐）

6、文本框的宽，只有在左/右对齐时有效

7、文本框的高

特别说明：在所有关于文本的控制中，只有设置了左右对齐，后面的宽度才会有效果，如果设置的中间对齐，则宽度无效果

 

禁止用户拖动进度条

打开ckplayer.js搜索：setup

打开ckplayer.xml搜索：setup

修改该参数的第36个值为0。

 

来源：http://www.ckplayer.com/article6.php?id=15

官网：http://www.ckplayer.com/

安装：http://www.ckplayer.com/article6.php?id=14

实例：http://www.ckplayer.com/ex6.php?id=33

ckplayer6.4.zip (322.3 KB)
下载次数: 132

分享到： 

 


免费轻量级网页播放器f4player,
flv, f4v, ... | php gizp压缩传输js和css文件 - PHP

2014-08-28 02:47

浏览 25362

评论(2)

分类:Web前端

相关推荐


参考知识库



Git知识库272  关注 | 304  收录


jQuery知识库440  关注 | 232  收录


大型网站架构知识库1225  关注 | 532  收录


AngularJS知识库591  关注 | 262  收录


评论

2 楼 天梯梦 2015-02-07  

hero1982 写道

请教您一下。您这组压缩包视频代码，如何应用到页面呢？

直接导入js和css，然后复制核心代码就可以了。你可以看一下demo page：http://www.ckplayer.com/article/19.htm  应该是很容易的！

1 楼 hero1982 2015-02-06  
请教您一下。您这组压缩包视频代码，如何应用到页面呢？