在阅读该教程时,假定你已了解了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版里没有l文件,且没有style.swf而是style.zip
调用方式说明
调用方式非常灵活,可以直接像插入普通flas件一样插入到网页中,也可以用adobe提
供的JS函数调用,也可以使用ckplayer提供的JS函数调用,你甚至可以根据教程自己制作封装形式的JS函数调用。
但不管使用何种调用形式,通过外部向播放器传递参数的方法却只有一种,通过flashvars传递(当然还可以通过js传递,但为了简单,在该段不作第二种的形式的说明)。
使用embed标志调用
我们先看下面这段引用播放器的代码,你会发现,这就跟调用普通的swf文件是一样的,唯一的不同点就是多了一个flashvars参数。
flash swf播放器<embed src="www.ckplayer/ckplayer6.1/ckplayer.swf" flashvars="f=movie.ks.js/flv/other/01.mp4" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" type="application/x-shockwave-flash"></embed>
代码参数说明:
embed:是调用浏览器插件的标志,并不是只用来调用swf文件,还包括其它的一些插件,但我们这里是用来调用swf文件的,在html中,很多标志是需要成对出现的,比如这里<embed></embed>,有开头的标志,就要有结束的标志。
src:表示播放器的路径
flashvars:表示向播放器里插入的变量名称和值,以上的代码,表示向播放器里传递了一个f变量,值是movie.ks.js/flv/other/01.mp4,播放器会读取到这个变量和值进行处理,flashvars不仅仅只能传递一个变量,而是可以传递多个变量的,各个变量用&符号相分隔,比如 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 页相同的域时才允许执行脚本操作。
samedomain 只有在 Flash 应用程序来自与 HTML 页相同的域时才允许执行脚本操作。
很多分享出去的视频,你会发现无法点击广告或精彩视频推荐或分享到微博的按钮,都是因为这里的值设置成了never或samedomain,禁止了交互功能,当然这也是为安全考虑
allowFullscreen:是否允许播放器全屏,设置成false时,点击全屏按钮也不能全屏
type:插件的类型,在浏览器中每种插件都有其固定的名称
使用adobe提供的js函数swfobject调用播放器
adobe的swfobject函数是一个比较强大的调用swf文件的函数,ckplayer.js里是使用的swfobject2.0版本,该函数功能虽然强大,但即使封装后的代码依旧比较大,有10k以上。
如果你的网站中已经有该函数,那你可以删除该函数,即使你的网站中使用的是swfobject1.5版本,也可以删除该函数而使用swfobject1.5的调用方式调用播放器。
调用代码如下:
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
f:'movie.ks.js/flv/other/01.mp4',
c:0
};
var params={bgcolor:'#000',allowFullScreen:true,allowScriptAccess:'always'};
var attributes={id:'ckplayer_a1',name:'ckplayer_a1'};
bedSWF('ckplayer/ckplayer.swf', 'a1', '600', '400', '10.0.0','ckplayer/expressInstall.swf', flashvars, params, attributes);
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论