ckplayer使用说明.docx

上传人:b****5 文档编号:8339405 上传时间:2023-01-30 格式:DOCX 页数:27 大小:348.69KB
下载 相关 举报
ckplayer使用说明.docx_第1页
第1页 / 共27页
ckplayer使用说明.docx_第2页
第2页 / 共27页
ckplayer使用说明.docx_第3页
第3页 / 共27页
ckplayer使用说明.docx_第4页
第4页 / 共27页
ckplayer使用说明.docx_第5页
第5页 / 共27页
点击查看更多>>
下载资源
资源描述

ckplayer使用说明.docx

《ckplayer使用说明.docx》由会员分享,可在线阅读,更多相关《ckplayer使用说明.docx(27页珍藏版)》请在冰豆网上搜索。

ckplayer使用说明.docx

ckplayer使用说明

在阅读该教程时,假定你已了解了ckplayer各文件的作用以及原理。

如果你还不了解,建议先看下功能介绍

ckplayer上手使用其实很简单,但要发挥其更多功能的话,就需要比较复杂的操作。

可能需要一点点时间的学习。

但是不用担心的是,在不涉及到插件的制作或复杂的js交互使用的情况下,你无需撑握任何编程语言。

在使用之前,建议你了解下你撑握的知识可以发挥ckplayer多大的功能。

一:

从没做过网站,想使用ckplayer播放视频

建议您先了解下网站架构的基本原理和html(超文本标记语言,不是编程语言)的基本知识,至少,你需要了解怎么在网页中调用flash(文件后缀为.swf)的方法。

二:

对html有些了解,知道怎么在网页中插入flash播放器,看过javascript,但并不了解

您可以使用ckplayer完整的功能

三:

对js熟悉,会使用

您可以使用ckplayer完整的功能并且可以用js自由的和播放器进行交互,把ckplayer玩弄于股掌中。

四:

熟悉as3语言

您可以制作出强大的跟播放器交互的功能插件

关于ckplayer的安装

安装很简单,只要你有网站的空间或服务器,直接把ckplayer文件夹(该目录下应该是包括ckplayer.swf的,而不是包括index.htm的)放在你网站根目录下,使用下面介绍的方法调用,请注意,跟你网站使用的什么环境和程序语言没有任何关系。

就相当于一个js文件一样使用即可。

∙最简单的文件配置

∙调用方式说明

∙使用embed标志调用

∙使用adobe提供的js函数swfobject调用播放器

∙使用ckplayer提供的js函数CKobject调用

∙flashvars里各个参数的说明

∙html5视频的调用,只调用html5视频播放器

∙完整的调用代码示例-实现跨平台播放视频

∙JS调用时使用swfobject和CKobject的区别和注意事项

∙前置广告的设置

∙暂停广告的使用

∙使用缓冲广告

∙调用视频的方式介绍,普通方式,网址形式,xml形式,swf形式

∙网址形式调用时输出的格式及注意事项

∙XML形式调用的输出格式

∙swf形式调用的原理及代码示例

∙播放rtmp视频的方法和注意事项

∙使用技巧

∙分享功能的使用

∙播放结束调用精彩视频推荐的设置

∙更多使用方法介绍

最简单的文件配置

如果只需要调用一个视频播放器播放视频,不需要分享功能,开关灯功能,调节亮度功能,那么你的ckplayer文件夹里只需要保留以下四个文件即可(6.2里只需要3个文件,并且没有style.swf而是style.zip)

 

如果你也不需要兼容html5,并且不需要交互,那么也可以只保留下面的三个文件也可以

 

注:

在ckplayer6.2版里没有language.xml文件,且没有style.swf而是style.zip

调用方式说明

调用方式非常灵活,可以直接像插入普通flash文件一样插入到网页中,也可以用adobe提供的JS函数调用,也可以使用ckplayer提供的JS函数调用,你甚至可以根据教程自己制作封装形式的JS函数调用。

但不管使用何种调用形式,通过外部向播放器传递参数的方法却只有一种,通过flashvars传递(当然还可以通过js传递,但为了简单,在该段不作第二种的形式的说明)。

使用embed标志调用

我们先看下面这段引用播放器的代码,你会发现,这就跟调用普通的swf文件是一样的,唯一的不同点就是多了一个flashvars参数。

 

代码参数说明:

embed:

是调用浏览器插件的标志,并不是只用来调用swf文件,还包括其它的一些插件,但我们这里是用来调用swf文件的,在html中,很多标志是需要成对出现的,比如这里,有开头的标志,就要有结束的标志。

src:

表示播放器的路径

flashvars:

表示向播放器里插入的变量名称和值,以上的代码,表示向播放器里传递了一个f变量,值是flashvars="a=1&s=2&x="向播放器里传递了三个值,其中x的值为空。

quality:

该值是设置播放器的质量和速度之间的选择用的,可以直接忽略,不看,用默认的就行,下面列出该参数各种值的意思,仅供了解 

Low速度优于美观,而且不应用反锯齿。

Autolow刚开始着重于速度,但当需要时随时提升美观。

Autohigh同时着重播放速度和美观,但需要时则牺牲美观来保证播放速度。

Medium应用一些反锯齿而不平滑位图。

它质量高于low设置而低于high设置。

High美观优于播放速度,而且一直应用反锯齿。

如果影片不包含动画,位图会被平滑化;而如果影片包含动画,位图将不变平滑。

Best提供最好的显示质量而不考虑播放速度。

所有输出都应用反锯齿及所有位图都被平滑化。

width:

定义播放器的宽,单位是像素

height:

定义播放器的高

align:

这是定义swf中的控制面版对齐方式,无视这个参数,用默认即可

allowScriptAccess:

这是一个很重要的参数,因为这里可以设置允许或禁止swf文件和页面中的js交互,各种值的意思如下:

 

always允许随时执行脚本操作。

never禁止所有脚本执行操作。

 samedomain只有在Flash应用程序来自与HTML页相同的域时才允许执行脚本操作。

很多分享出去的视频,你会发现无法点击广告或精彩视频推荐或分享到微博的按钮,都是因为这里的值设置成了never或samedomain,禁止了交互功能,当然这也是为安全考虑

allowFullscreen:

是否允许播放器全屏,设置成false时,点击全屏按钮也不能全屏

type:

插件的类型,在浏览器中每种插件都有其固定的名称

 

使用adobe提供的js函数swfobject调用播放器

adobe的swfobject函数是一个比较强大的调用swf文件的函数,ckplayer.js里是使用的swfobject2.0版本,该函数功能虽然强大,但即使封装后的代码依旧比较大,有10k以上。

如果你的网站中已经有该函数,那你可以删除该函数,即使你的网站中使用的是swfobject1.5版本,也可以删除该函数而使用swfobject1.5的调用方式调用播放器。

调用代码如下:

varflashvars={

f:

'

c:

0

};

varparams={bgcolor:

'#000',allowFullScreen:

true,allowScriptAccess:

'always'};

varattributes={id:

'ckplayer_a1',name:

'ckplayer_a1'};

swfobject.embedSWF('ckplayer/ckplayer.swf','a1','600','400','10.0.0','ckplayer/expressInstall.swf',flashvars,params,attributes);

这个是用来放置播放器的容器,这个需要在swfobject.embedSWF的第二个参数里定义

这个指引用播放器的配置文件,只有引用到了才能使用播放器,所以要注意src=后面的路径

这个是定义js代码的标志,所有的相关代码都放在这个中间

varflashvars={};

这是定义了一个对象,相当于flashvars的值,用来设置向播放器传递各项参数,如果不需要某一个属性,可以直接删除掉,不影响,只要保留关键的就行了。

具体的还要看自己的需要进行删除

varparams={}

该对象是设置播放器的在页面里的一些配置,默认的有三个属性:

分别是,背景颜色(不是播放器内部背景,而是页面里播放器的背景,只有播放器里的背景色的透明度设置成0的时候才会显示下面的这个颜色),是否允许全屏,是否允许交互

varattributes={id:

'ckplayer_a1',name:

'ckplayer_a1'};

该对象是设置播放器的id和name名称,这个参数是很有必要设置的

swfobject.embedSWF('ckplayer/ckplayer.swf','a1','600','400','10.0.0','ckplayer/expressInstall.swf',flashvars,params,attributes);

该参数就是调用播放器文件了,要注意二个swf文件的路径

参数分别表示的意思如下:

    1、播放器地址

    2、播放器的容器,将会在该id的容器(可以是div容器,也可以是别的,如span,li之类的反正有id就可以了)

    3、播放器的宽

    4、播放器的高

    5、播放器所需flash插件的版本

    6、检查flash插件版本的文件,要注意路径

    7、即上面定义的varflashvars变量

    8、即上面定义的varparams变量

    9、即上面定义的varattributes变量

 

使用ckplayer提供的js函数CKobject调用

ckplayer自己封装的调用播放器的代码,也是js函数,主要是把html5和swf调用集成在一起了。

adoble的调用函数是在页面加载完成后才运行,而ckplayer的调用函数是在加载到代码时即运行,如果你使用该函数,ckplayer.js里的最后一行swfobject就可以删除了

varflashvars={

f:

'

c:

0

};

CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars);

这个是用来放置播放器的容器,这个需要在swfobject.embedSWF的第二个参数里定义

这个指引用播放器的配置文件,只有引用到了才能使用播放器,所以要注意src=后面的路径

这个是定义js代码的标志,所有的相关代码都放在这个中间

varflashvars={};

这是定义了一个对象,相当于flashvars的值,用来设置向播放器传递各项参数,如果不需要某一个属性,可以直接删除掉,不影响,只要保留关键的就行了。

具体的还要看自己的需要进行删除

CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars);

该参数就是调用播放器文件了,要注意二个swf文件的路径

参数分别表示的意思如下:

    1、播放器地址

    2、播放器的容器,将会在该id的容器(可以是div容器,也可以是别的,如span,li之类的反正有id就可以了)

    3、播放器的id和name

    4、播放器的宽

    5、播放器的高

    7、即上面定义的varflashvars变量

flashvars里各个参数的说明

参数

使用说明

f

s=0时地为普通的视频地址

s=1时是一个网址,网址里存放视频地址

s=2时是一个网址,网址里输出xml格式的视频地址

s=3时是一个swf文件地址,swf和播放器进行交互读取地址

a

当s>0时,a和f值拼出一个新的地址,在新的地址里读取视频地址,

s

调用方式,0=普通方法(f=视频地址),1=网址形式,2=xml形式,3=swf形式(s>0时f=网址,配合a来完成对地址的组装)

c

是否读取文本配置,0不是,1是,当=1时,播放器会自动读取和播放器相同名称的xml(默认是的ckplayer.xml)来进行进一步的配置

x

在c=1的时候,自定义调用xml风格路径,为空的话将调用跟播放器同名的xml文件。

这个参数的作用是可以使用多套风格或设置的文件来进行随机调用

i

初始图片地址,就是在播放器默认是暂停或默认不加载的情况下先给一张图片遮在播放器前面,让其看起来不会一片黑,关于初始图片的大小的控制请参考配置文件里(ckplayer.js或ckplayer.xml)的ck.setup的第14个参数

d

暂停时播放的广告,swf/图片,多个用竖线隔开,图片要加链接地址,没有的时候留空就行

u

暂停时如果是图片的话,加个链接地址,如果没有就留空,

l

前置广告地址(也可以是以|隔开的数组),swf/图片/视频,多个用竖线隔开,图片和视频要加链接地址,关于前置广告

r

前置广告的链接地址,多个用竖线隔开,没有的留空

t

视频开始前播放swf/图片时的时间,多个用竖线隔开

y

这里是使用网址形式调用广告地址时使用,如果要使用这个参数,前置广告的l,r,t里至少要设置l的参数为空,播放器才会根据y的值进行调用

z

缓冲广告,只能放一个,swf格式

e

视频结束后的动作,0是调用js函数functionplayerstop(){}、这个参数有一篇单独的使用说明,1是循环播放,2是暂停播放并且不调用暂停广告,3是调用视频推荐列表的插件,4是清除视频流并调用js、功能和0差不多,5是暂停并且同时调用暂停广告

v

默认音量,0-100之间

p

视频默认0,暂停,1是播放

h

播放http视频流时采用何种拖动方法,=0不使用任意拖动,=1是使用按关键帧,=2是按时间点,=3是自动判断按什么(如果视频格式是.mp4就按关键时间,.flv就按关键帧),=4也是自动判断(只要包含字符mp4就按mp4来,只要包含字符flv就按flv来)

q

视频流拖动时参考参数,默认是start

m

默认是否采用点击播放按钮后再加载视频,0不是,1是,这个参数的好处是一个页面上放多个视频时不需要加载所以的视频,点击哪个加载哪个

o

在设置m=1,即默认不加载视频的时候向播放器传递该视频的时间,单位:

秒,也可以不传

w

在设置m=1,即默认不加载视频的时候向播放器传递该视频的字节数,也可以不传

g

视频直接g秒开始播放,这个功能类似跳过片头的功能,当然这个功能还可以用js来实现

j

视频提前j秒结束,跳过片尾的功能

k

提示点时间,如30|60鼠标经过进度栏30秒,60秒会提示n参数指定的相应的文字,这是以|隔开的一个数字数组

这个是鼠标经过进度栏上一些关键点时显示一个提示框,这些点需要自行设置,点的样式可以在配置文件里ck.pm_start参数设置

n

提示点文字,跟k配合使用,各提示文字以|隔开,所以提示文字里不能有|,(如:

提示点1|提示点2)

b

指定播放器是否进行交互,默认交互,b=1时不使用交互,所以在站外引用时需要设置ckplayer.xml里的里设置{b->1}

wh

初始化指定视频的宽高比,如wh:

'16:

9',该功能在6.2以后的版本里方支持

ct

时间显示是否采用修正,默认2,自动判断,1是强制修正,0是不修正,该功能6.2后支持

html5视频的调用,只调用html5视频播放器

html5视频调用可以和ckplayer的flash播放器配合调用,也可以单独调用,以下是一个完整的只调用html5播放器的应用

varflashvars={

p:

1,

e:

1,

m:

0,

i:

'初始图片地址'

};

varvideo=['

varsupport=['iPad','iPhone','ios','android+false','msie10+false'];

CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);

是展示视频的容器

varflashvars={}是设置html5视频的一些参数,目前只提供四个变量的设置

p:

0默认不播放,1是默认播放

e:

0默认播放完后暂停,1是循环播放

m:

0是默认打开页面就加载视频,1是打开页面但不加载视频

i:

在默认暂停或默认不加载视频的情况下显示一张缩略图

varvideo=[]是设置html5视频的地址和视频类别,可以添加多种视频格式已适应在不同的平台上播放,该参数是一个数组形式(6.2之前是一个对象),说明:

['视频地址->视频格式','视频地址->视频格式']

varsupport=[]是判断在哪些平台上使用html5播放器,平台类型名称见下方列表,这里可以组合使用,例如上面的'android+false','msie10+false',就是指在android上没有装flash插件的情况下使用html5播放器,ie10上也是这种判断

CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);

括号里面的参数的意思分别是

1、视频容器id

2、播放器id

3、宽度

4、高度

5、视频地址对象

6、相关设置对象

7、支持的平台对象

以下是varsupport里限制平台时使用的名称

iPhone

iPhone

iPad

iPad

ios

ios终端

android

android终端或者uc浏览器

trident

IE内核

presto

opera内核

webKit(可加上版本号:

如webKit5)

苹果、谷歌内核

gecko(可加上版本号:

如gecko10)

火狐内核

mobile(可加上版本号:

如webKit5)

移动终端

webApp

web应该程序

msie(可加上版本号:

如msie10)

IE浏览器

完整的调用代码示例-实现跨平台播放视频

以下的代码是综合兼容了各平台,各浏览器对视频播放器的支持情况。

varflashvars={

f:

'

c:

0,

p:

1,

e:

1,

m:

0,

i:

''

};

varparams={bgcolor:

'#000',allowFullScreen:

true,allowScriptAccess:

'always'};

varattributes={id:

'ckplayer_a1',name:

'ckplayer_a1'};

swfobject.embedSWF('ckplayer/ckplayer.swf','a1','600','400','10.0.0','ckplayer/expressInstall.swf',flashvars,params,attributes);

varvideo=['

varsupport=['iPad','iPhone','ios','android+false','msie10+false'];

CKobject.embedHTML5('video','ckplayer_a1',600,400,video,flashvars,support);

可以发现。

这里只是把调用ckplayer的代码和调用html5播放器的代码放在了一起,即可实现跨平台播放,这段代码的工作原理:

首先建议你使用二个嵌套的div容器来装载播放器,像本例中使用了

代码执行过程中会首行调用ckplayer播放器,接着

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 小学教育 > 数学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1