flv f4v mp4 视频播放器代码
ckplayer是一款在网页上播放视频的免费的播放器,功能强大,体积小巧,跨平台,使用起来随心所欲。
播放器主要以adobe的flash(所使用的版本是CS5)平台开发,所以在支持flash插件的平台和浏览器上都可以使用,而无需下载其它插件,如果你需要修改完整版里提供的相关的flash源文件,请使用adobe的flash cs5以上版本打开源文件修改。
ckplayer同时也支持html5的视频播放,即同时可以在Ipad,Iphone等IOS平台上播放视频,并且只需简单代码就可以使用,无需了解html5插入视频的方法。
软件在对各平台的兼容性方面适应性比较强,比如你可以设置在Android平台或wp平台上在用户已安装flash插件的时候使用flash播放器,在没有装flash插件的情况下使用html5播放器。
ckplayer是一种前台使用的程序,不涉及到服务器程序(asp,php,jsp,.net),也不涉及到对服务器的操作(即不需要写入权限),所以不存在安全方面的问题。同时可以集成在任何程序中,包括asp,php,jsp,.net以及其它支持插入flash的环境中。
功能列表:
兼容SWF/HTML5跨平台播放
支持流行视频格式flv,f4v,mp4,
支持html5格式m3u8,webm,ogg theora,mp4
支持RTMP协议下的视频直播和回放
支持前置广告(swf,图片,视频)
支持前置广告多个随机/顺序播放
支持暂停广告(swf,图片)多个随机播放
支持缓冲广告,小窗口广告,滚动文字广告
支持多达6种形式的视频地址调用方式
支持多段视频无缝播放,支持多集连播
支持视频预览功能
自定义提示点功能,跳过片头片尾功能
bshare完美视频分享功能
调节视频尺寸,亮度,对比度,色相,饱和度功能
支持播放结束显示精彩视频推荐
支持自定义播放器界面,无需了解程序,即可自己制作出风格
支持js和播放器的互动操作,可以任意控制播放器的动作,比如暂停/播放
丰富的api接口,快速打造功能强大的插件
安装方法及环境需求
安装很简单,只要你有网站的空间或服务器,直接把ckplayer文件夹(该目录下应该是包括ckplayer.swf的,而不是包括index.htm的)放在你网站根目录下,使用下面介绍的方法调用,请注意,跟你网站使用的什么环境和程序语言没有任何关系。就相当于一个js文件一样使用即可。
- 1:文件选择方案(根据不同的需求选择部份或全部文件)
- 2:调用方式一:embed简单调用方式,只能调用Flash播放器
- 3:调用方式二(1):使用ckplayer提供的js函数CKobject,兼容Flash+HTML5(推荐)
- 4:调用方式二(2):使用js函数CKobject只调用Flash播放器(推荐)
- 5:调用方式二(3):使用js函数CKobject只调用HTML5播放器(推荐)
- 6:HTML5播放器对视频格式的要求
- 7:RTMP视频的调用及相关说明
- 8:调用方式三:使用adobe提供的js函数swfobject(不推荐)
- 9:flashvars里各参数的功能介绍
- 10:调用视频地址方式一:普通调用
- 11:调用视频地址方式二:网址形式调用
- 12:调用视频地址方式三:xml格式调用
- 13:调用视频地址方式四:用flash插件调用
文件选择方案(根据不同的需求选择部份或全部文件)
方案一:如果只需要调用一个视频播放器播放视频,不需要分享功能,开关灯功能,调节亮度功能,也不需要交互功能,也不需要html5的功能,那么你的ckplayer文件夹里只需要保留以下四个文件即可
方案二:如果你需要交互(或需要html5下的视频播放),但是不需要分享,可以只保留以下文件
方案三:保留全部文件,可以使用全部功能
调用方式一:embed简单调用方式,只能调用Flash播放器
我们先看下面这段引用播放器的代码,你会发现,这就跟调用普通的swf文件是一样的,唯一的不同点就是多了一个flashvars参数。
<embed src="http://www.ckplayer.com/ckplayer6.1/ckplayer.swf" flashvars="f=http://movie.ks.js.cn/flv/other/01.mp4" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullscreen="true" wmode="transparent" type="application/x-shockwave-flash"></embed>
关于该调用方式的说明和相关知识点:
embed:是调用浏览器插件的标志,并不是只用来调用swf文件,还包括其它的一些插件,但我们这里是用来调用swf文件的,在html中,很多标志是需要成对出现的,比如这里<embed></embed>,有开头的标志,就要有结束的标志。
src:表示播放器的路径
flashvars:表示向播放器里插入的变量名称和值,以上的代码,表示向播放器里传递了一个f变量,值是http://movie.ks.js.cn/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 页相同的域时才允许执行脚本操作。
很多分享出去的视频,你会发现无法点击广告或精彩视频推荐或分享到微博的按钮,都是因为这里的值设置成了never或samedomain,禁止了交互功能,当然这也是为安全考虑
allowFullscreen:是否允许播放器全屏,设置成false时,点击全屏按钮也不能全屏
type:插件的类型,在浏览器中每种插件都有其固定的名称
wmode:是控制播放器是否是透明背景的参数,在设置成wmode="transparent"时不仅仅可以使之背景透明,而且还可以使得该播放器位于其它页面元素之下。不会遮挡到其它元素。该参数在有些情况下很有用处。
调用方式二(1):使用ckplayer提供的js函数CKobject,兼容Flash+HTML5(推荐)
CKobject函数是ckplayer提供的一个调用播放器的函数,可以很好的兼容集成Flash播放器和HTML5播放器。
下面是一个简单的调用播放器的代码示例,注意在调用前要引入ckplayer.js,下面为已引入的调用代码:
<div id="a1"></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ f:'http://movie.ks.js.cn/flv/other/1_0.flv', c:'0', p:1 }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"}; var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']; CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video,params) </script>
上面的代码每一行的意思以及每一个参数的意思解释如下:
1:<div id="a1"></div>
播放容器,即播放器最后将动态的在这里进行加载,容器的id="a1"
2:<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
这一行是引入播放器的js配置文件,因为Ckobject函数就是写在这个文件里,要注意src的路径要正确,不然则调用错误
3:<script type="text/javascript">
这是html里执行javascript(缩写:js)代码的标志,需要跟</script>(代码第14行已有)成对出现
4-8:var flashvars={};
这是js里定义对象的代码。这里定义了一个对象,这个对象是用来保存设置播放器里初始化时相关的配置,比如f值是定义(使用flash播放器时)视频地址的。c值是定义播放器调用ckplayer/ckplayer.js中的ckstyle()函数做为风格配置参数,p:1是定义该视频默认直接播放。如果是p:0则视频默认暂停
9:var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};
该参数只有Flash播放器用到,这里也定义了一个对象,是设置播放器相关属性的。bgcolor是播放器的背景颜色,allowFullScreen是是否允许全屏,allowScriptAccess是否允许播放器跟页面中的js进行交换,wmode是设置播放器是否透明
10:var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
定义html5视频所用到的视频地址的一个数组,为了适应不同的浏览器和平台,建议该数组增加更多的视频格式。如官方首页设置的样式
var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];
上面的代码演示了调用三种视频格式的方法,分别调用了mp4,webm,ogg三种视频格式,当然还可以增加另外的视频格式如m3u8
要注意的是,html5方面调用视频地址时的格式,正常的是:视频地址->视频格式,比如当视频是mp4格式时,后面需要说明:video/mp4,如果是m3u8的可以直接放地址,不需要加上->video/m3u8
关于这个参数还有另外的一种调用方式是使用网址形式的调用。代码如下:
var video=['http://www.ckplayer.com/1.php?a=2->ajax/get/utf-8'];
上面的代码是指将从http://www.ckplayer.com/1.php?a=2这个地址读取视频地址传递给html5播放器使用,该页面地址的源代码里只需要输出一个正确的视频地址即可。不需要有其它内容,示例:
http://www.ckplayer.com/webm/1_0.mp4->audio/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg
当然也可以地址前面加上相关的参数比如
{p->1}http://www.ckplayer.com/webm/1_0.mp4->audio/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg
->后面的各个参数的意思如下:
ajax:使用无刷新读取网址形式调用视频地址
get:使用get方法传递参数,另外的还有一个post方法
utf-8:是该地址的网页编码是utf-8的,其它的还有如gb2312
11:CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video,params)
该行代码是开始调用播放器,一共9个参数,你也可以把最后一个参数去掉。
括号里面的参数的意思分别是
1、播放器swf文件路径,注意,该路径一定要正确
2、播放器id,不管最后页面上显示的是Flash播放器还是HTML5播放器,ID都是相同的
3、播放器宽度,可以设置成百分比形式
4、播放器高度,可以设置成百分比形式
5、优先使用值,默认false,优先使用Flash播放器,即在用户装了Flashplayer插件并且版本在11以上的情况下会调用Flash播放器播放,true=优先使用HTML5播放器。建议设置成false
6、Flash视频地址及初始化配置(上面定义的var flashvars={})
7、HTML5所用到的视频地址(上面定义的var video={})
8、当环境使用Flash播放器时的配置,该项可以省略,因为CKobject函数本身默认的就是上面的配置。
12:</script>
调用播放器结束
调用方式二(2):使用js函数CKobject只调用Flash播放器(推荐)
注意在调用前要引入ckplayer.js,下面为已引入的调用代码:
<div id="a1"></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ f:'http://movie.ks.js.cn/flv/other/1_0.flv', c:'0', p:1 }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"}; CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params); </script>
上面的代码每一行的意思以及每一个参数的意思解释如下:
1:<div id="a1"></div>
播放容器,即播放器最后将动态的在这里进行加载,容器的id="a1"
2:<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
这一行是引入播放器的js配置文件,因为Ckobject函数就是写在这个文件里,要注意src的路径要正确,不然则调用错误
3:<script type="text/javascript">
这是html里执行javascript(缩写:js)代码的标志,需要跟</script>(代码第14行已有)成对出现
4-8:var flashvars={};
这是js里定义对象的代码。这里定义了一个对象,这个对象是用来保存设置播放器里初始化时相关的配置,比如f值是定义视频地址的。c值是定义该播放器调用ckplayer/ckplayer.js中的ckstyle()函数做为风格配置参数,p:1是定义该视频默认直接播放。如果是p:0则视频默认暂停
9:var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};
这里也定义了一个对象,是设置播放器相关属性的。bgcolor是播放器的背景颜色,allowFullScreen是是否允许全屏,allowScriptAccess是否允许播放器跟页面中的js进行交换,wmode是设置播放器是否透明
10:CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars,params);
该行是调用swf播放器的代码
CKobject函数里embedSWF是调用swf播放器的,下面的embedHTML5是调用html5播放器的
该函数里默认有7个参数,分别对应的意思如下
1:swf播放器路径,请注意要填写正确的路径
2:播放器放置的容器,这里即上面的<div id="a1"></div>
3:播放器的id和name值,这里设置的是ckplayer_a1
4:播放器的宽
5:播放器的高
6:flashvars的值,该值是向播放器里传递视频地址之类参数的(对象)变量,在4-8行定义了该变量,这里只是引用
7:params,该参数即第9行定义的变量。
11:</script>
调用播放器结束
调用方式二(3):使用js函数CKobject只调用HTML5播放器(推荐)
注意在调用前要引入ckplayer.js,下面为已引入的调用代码:
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
p:1,
e:1,
i:'http://www.ckplayer.com/images/loadimg3.jpg'
};
var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
var support=['iPad','iPhone','ios','android+false','msie10+false'];
CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
</script>
上面的代码每一行的意思以及每一个参数的意思解释如下:
1:<div id="video"><div id="a1"></div></div>
播放容器,即播放器最后将动态的在这里进行加载。
2:<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
这一行是引入播放器的js配置文件,因为Ckobject函数就是写在这个文件里,要注意src的路径要正确,不然则调用错误
3:<script type="text/javascript">
这是html里执行javascript(缩写:js)代码的标志,需要跟</script>(代码第14行已有)成对出现
4-8:var flashvars={};
这是js里定义对象的代码。这里定义了一个对象,这个对象是用来保存设置播放器里初始化时相关的配置,在HTML5里该参数只有三个值可以使用:分别是
p:该值是控制播放器默认是否播放的,0=默认暂停,1=默认播放,2=默认不加载视频,用户点击后才会继续加载,当然该设置=1时并不能保证默认就能播放,因为在有些手机或IOS设备由于考虑到用户设置和手机默认的HTML5方面的设置。即使设置成1也需要等用户点击才会加载。
e:播放完成后的动作,0=调用js函数(默认是调用playerstop()),=1时是循环播放,=2或=3是暂停
9:var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
定义html5视频所用到的视频地址的一个数组,为了适应不同的浏览器和平台,建议该数组增加更多的视频格式。如官方首页设置的样式
var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];
上面的代码演示了调用三种视频格式的方法,分别调用了mp4,webm,ogg三种视频格式,当然还可以增加另外的视频格式如m3u8
要注意的是,html5方面调用视频地址时的格式,正常的是:视频地址->视频格式,比如当视频是mp4格式时,后面需要说明:video/mp4,如果是m3u8的可以直接放地址,不需要加上->video/m3u8
关于这个参数还有另外的一种调用方式是使用网址形式的调用。代码如下:
var video=['http://www.ckplayer.com/1.php?a=2->ajax/get/utf-8'];
上面的代码是指将从http://www.ckplayer.com/1.php?a=2这个地址读取视频地址传递给html5播放器使用,该页面地址的源代码里只需要输出一个正确的视频地址即可。不需要有其它内容,示例:
http://www.ckplayer.com/webm/1_0.mp4->audio/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg
当然也可以地址前面加上相关的参数比如
{p->1}http://www.ckplayer.com/webm/1_0.mp4->audio/mp4,http://www.ckplayer.com/webm/0.webm->video/webm,http://www.ckplayer.com/webm/0.ogv->video/ogg
->后面的各个参数的意思如下:
ajax:使用无刷新读取网址形式调用视频地址
get:使用get方法传递参数,另外的还有一个post方法
utf-8:是该地址的网页编码是utf-8的,其它的还有如gb2312
10:var support=['iPad', 'iPhone', 'ios'];
定义一个(数组)变量来设置在哪些平台或浏览器中使用html5播放器,以下列出了该数组可以定义的数值以及对应的平台
数组内容 | 作用 |
all | 所有平台都使用htmll5 |
all+false | 所有不支持flash的平台都使用html5 |
iPhone | iPhone |
iPad | iPad |
ios | ios终端 |
android | android终端或者uc浏览器 |
trident | IE内核 |
presto | opera内核 |
webKit(可加上版本号:如webKit5) | 苹果、谷歌内核 |
gecko (可加上版本号:如gecko10) | 火狐内核 |
mobile (可加上版本号:如webKit5) | 移动终端 |
webApp | web应该程序 |
msie (可加上版本号:如msie10) | IE浏览器 |
使用方法举例
var support=['all'];所有的平台都使用html5
var support=['all+false'];//所有的不支持flash或没安装flash插件的平台上都使用html5
var support=['android+false','iPad'];//在iPad上使用html5,在android(安卓)上没有安装flash插件的情况下使用html5
11:CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
括号里面的参数的意思分别是
1、视频容器id
2、播放器id
3、宽度
4、高度
5、视频地址
6、相关设置
7、支持的平台
12:</script>
调用播放器结束
HTML5播放器对视频格式的要求
var video=[],这是一个数组类型,里面可以放多个视频(格式)地址,这样设置的原因是因为在不同的环境(终端)并不是只支持同一的视频格式的,虽然mp4视频能在大部分的终端使用。但有些终端并不能播放mp4,但有可能会支持其它格式的视频,如webm,ogg等,有关于各终端支持的视频格式如下说明:
Chrome | MP4, WebM | Flv,F4v,Mp4 |
Firefox | WebM | Flv,F4v,Mp4 |
Internet Explorer | MP4 | Flv,F4v,Mp4 |
Safari | MP4 | Flv,F4v,Mp4 |
iOS | MP4,m3u8 | 不支持 |
Android | MP4,m3u8 | Flv,F4v,Mp4 |
Opera | WebM,m3u8 | 不支持 |
IPad | MP4,m3u8 | 不支持 |
Iphone | MP4,m3u8 | 不支持 |
RTMP视频的调用及相关说明
在ckplayer中,视频的格式是智能判断的。所以rtmp视频调用的方式跟任何调用普通视频的方法是一样的(在HTML5环境中不同,HTML5是不支持播放rtmp视频流的,需要把直播视频流打包成m3u8格式,有关于怎样将rtmp打包成m3u8以支持非pc终端的方法请自行搜索)。
下面是一个实例,注意,html5部分的m3u8地址是一个不可以访问的地址,只是做个示例而已
<div id="a1"></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ f:'rtmp://live5.cqnews.net:1935/live/TVFLV13', c:'0', lv:'1', p:1 }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"}; var video=['http://www.ckplayer/live/live.m3u8']; CKobject.embed('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video,params) </script>
f值里的就是一个rtmp视频流地址,请注意格式,rtmp://ip/live(流地址)/livestream(实例名称)
如果是多级目录,比如地址是rtmp://localhost/vod/ab/c的。在ckplayer里播放的话,需要修改二个地方,
一个是修改ckplayer.js和ckplayer.xml里的ck.pm_spac = '|';改成ck.pm_spac = ',';总至不能用|,用其它的任何符号都能,此时的|我们需要在地址里做为区分rtmp的协议和实例名称
二是调用视频地址时修改f:'rtmp://localhost/vod/ab/c'为rtmp://localhost/vod|ab/c
这样就可以了,注意竖线前面是地址,后面是实例名称
这方法针对多级目录的rtmp有效
如果是使用red5搭建的rtmp播放环境或使用自己的程序搭建的rtmp环境,还需要注意设置ckplayer.js里的setup:''值(ckplayer.xml里的<setup></setup>)的第23个参数,设置成0,因为播放器在连接服务器的时候有时会收到一个断开信号,但是因为是基于rtmp协议的,会自动等待连接,无需重复请求连接,重复请求倒会导致不能连接上服务器
另外还要注意ckplayer.js里setup:''值(ckplayer.xml里的<setup></setup>)的第13个参数,播放器的缓冲时间设置不能高于你服务器设置的缓冲时间。
lv值的意思,当设置成1是,播放器会认为此时是在播放直播放,不会在时间处显示已播放时间和总时间,并且会锁定进度栏和快进快退按钮
调用方式三:使用adobe提供的js函数swfobject(不推荐)
adobe的swfobject函数是一个比较强大的调用swf文件的函数,但是因为如下原因,ckplayer官方在6.4以后不再提供该函数
1:该函数文件比较大
2:不兼容HTML5
3:很多用户本身自己网站里已存在该函数
如果你想使用该函数调用播放器,请自行下载
下面以swfobject2.2为例调用播放器,因为是兼容了html5,所以下面的示例中也使用了CKobject
调用代码如下:
<div id="video"><div id="a1"></div></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ f:'http://movie.ks.js.cn/flv/other/01.mp4', c:0, p:1 }; var params={bgcolor:'#000',allowFullScreen:true,allowScriptAccess:'always'}; var attributes={id:'ckplayer_a1',name:'ckplayer_a1'}; swfobject.embedSWF('ckplayer/ckplayer.swf', 'a1', '600', '400', '10.0.0','ckplayer/expressInstall.swf', flashvars, params, attributes); var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4']; var support=['iPad', 'iPhone', 'ios']; CKobject.embedHTML5('video','ckplayer_a1',600,400,video,flashvars,support); </script>
上面的代码每一行的意思以及每一个参数的意思解释如下:
1:<div id="video"><div id="a1"></div></div>
播放容器,即播放器最后将动态的在这里进行加载,这是有二个容器嵌套使用的,外面的容器的id="video",里面的容器的id="a1"
为什么要放二个容器的,其实理论上用CKobject函数调用是不需要二个容器的,但是因为如果你是使用的swfobject调用的话就需要了。便于控制。
id="a1"的容器主要用来装载swf播放器
id="video"的容器主要用来装载html5的播放器
2:<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
这一行是引入播放器的js配置文件,因为Ckobject函数就是写在这个文件里,要注意src的路径要正确,不然则调用错误
3:<script type="text/javascript">
这是html里执行javascript(缩写:js)代码的标志,需要跟</script>(代码第15行已有)成对出现
4-8:var flashvars={};
这 是js里定义对象的代码。这里定义了一个对象,这个对象是用来保存设置播放器里初始化时相关的配置,比如f值是定义视频地址的。c值是定义该播放器调用 ckplayer/ckplayer.js中的ckstyle()函数做为风格配置参数,p:1是定义该视频默认直接播放。如果是p:0则视频默认暂停
9:var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:"transparent"};
这里也定义了一个对象,是设置播放器相关属性的。bgcolor是播放器的背景颜色,allowFullScreen是是否允许全屏,allowScriptAccess是否允许播放器跟页面中的js进行交换,wmode是设置播放器是否透明
10:var attributes={id:'ckplayer_a1',name:'ckplayer_a1'};
该对象是设置播放器的id和name名称,这个参数是很有必要设置的
11:swfobject.embedSWF('ckplayer/ckplayer.swf', 'a1', '600', '400', '10.0.0','ckplayer/expressInstall.swf', flashvars, params, attributes);
该行是调用swf播放器的代码,要注意二个swf文件的路径
参数分别表示的意思如下:
1、播放器地址
2、播放器的容器,将会在该id的容器(可以是div容器,也可以是别的,如span,li之类的反正有id就可以了)
3、播放器的宽
4、播放器的高
5、播放器所需flash插件的版本
6、检查flash插件版本的文件,要注意路径
7、即上面定义的var flashvars变量
8、即上面定义的 var params变量
9、即上面定义的 var attributes变量
至此,调用swf播放器的代码已结束。如果你只用swf,下面的内容可以不了解。
12:var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4'];
定义html5视频所用到的视频地址的一个数组,为了适应不同的浏览器和平台,建议该数组增加更多的视频格式。如官方首页设置的样式
var video=['http://movie.ks.js.cn/flv/other/1_0.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];
上面的代码演示了调用三种视频格式的方法,分别调用了mp4,webm,ogg三种视频格式,当然还可以增加另外的视频格式如m3u8
关于这个参数还有另外的一种调用方式是使用网址形式的调用。代码如下:
var video=['http://www.ckplayer.com/1.php?a=2->ajax/get/utf-8'];
上面的代码是指将从http://www.ckplayer.com/1.php?a=2这个地址读取视频地址传递给html5播放器使用,该页面地址的源代码里只需要输出一个正确的视频地址即可。不需要有其它内容,当然也可以地址前面加上相关的参数比如
{p->1}http://www.ckplayer.com/1.mp4
->后面的各个参数的意思如下:
ajax:使用无刷新读取网址形式调用视频地址
get:使用get方法传递参数,另外的还有一个post方法
utf-8:是该地址的网页编码是utf-8的,其它的还有如gb2312
13:var support=['iPad', 'iPhone', 'ios'];
定义一个(数组)变量来设置在哪些平台或浏览器中使用html5播放器,以下列出了该数组可以定义的数值以及对应的平台
数组内容 | 作用 |
all | 所有平台都使用html5 |
all+false | 所有不支持flash的平台都使用html5 |
iPhone | iPhone |
iPad | iPad |
ios | ios终端 |
android | android终端或者uc浏览器 |
trident | IE内核 |
presto | opera内核 |
webKit(可加上版本号:如webKit5) | 苹果、谷歌内核 |
gecko (可加上版本号:如gecko10) | 火狐内核 |
mobile (可加上版本号:如webKit5) | 移动终端 |
webApp | web应该程序 |
msie (可加上版本号:如msie10) | IE浏览器 |
使用方法举例
var support=['all'];所有的平台都使用html5
var support=['all+false'];//所有的不支持flash或没安装flash插件的平台上都使用html5
var support=['android+false','iPad'];//在iPad上使用html5,在android(安卓)上没有安装flash插件的情况下使用html5
14:CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
括号里面的参数的意思分别是
1、视频容器id
2、播放器id
3、宽度
4、高度
5、视频地址
6、相关设置
7、支持的平台
15:</script>
调用播放器结束
flashvars里各参数的功能介绍
参数 | 默认 | 使用说明 |
f | 无 | s=0:为普通的视频地址 s=1:是一个网址,网址里存放视频地址 s=2:是一个网址,网址里输出xml格式的视频地址 s=3:是一个swf文件地址,该文件可以自定义方式读取视频地址,然后传递给播放器,播放器在收到地址后则卸载掉该文件 s=4:是一个swf文件地址,该文件可以向播放器发送视频流和提供各种操作函数,比如说播放,并且会加载在播放器界面中 |
a | 无 | 当s>0时,a和f值拼出一个新的地址,在新的地址里读取视频地址 |
s | 0 |
调用方式 |
c | 0 | 是否读取文本配置,0不是,1是,当=1时,播放器会自动读取和播放器相同名称的xml(默认是的ckplayer.xml)来进行进一步的配置 |
x | 无 | 在c=1的时候,自定义调用xml风格路径,为空的话将调用跟播放器同名的xml文件。这个参数的作用是可以使用多套风格或设置的文件来进行随机调用 在c=0的时候,指定调用js中的风格配置函数,如c:0,x:'ckstyle2', |
i | 无 | 初始图片地址,就是在播放器默认是暂停(p:0)或默认不加载(p:2)的情况下先给一张图片遮在播放器前面,让其看起来不会一片黑,关于初始图片的大小的控制请参考配置文件里(ckplayer.js或ckplayer.xml)的setup的第14个参数 |
d | 无 | 暂停时播放的广告,swf/图片,多个用竖线隔开,图片要加链接地址,没有的时候留空就行 |
u | 无 | 暂停时如果是图片的话,加个链接地址,如果没有就留空, |
l | 无 | 前置广告地址,格式支持:swf/图片/http协议视频,多个用竖线隔开,图片和视频要加链接地址(下面r的值) |
r | 无 | 前置广告的链接地址,多个用竖线隔开,没有的留空 |
t | 5|5|5... | 视频开始前播放swf/图片时的时间,多个用竖线隔开 ,如果不设置,默认是每个广告5秒的时间 |
y | 无 | 这里是使用网址形式调用广告地址时使用,如果要使用这个参数,前置广告的l,r,t里至少要设置l的参数为空,播放器才会根据y的值进行调用 |
e | 1 | 视频结束后的动作 =0:调用js函数function playerstop(){}、这个参数有一篇单独的使用说明 =1:是循环播放, =2:是暂停播放并且不调用暂停广告 =3:是调用视频推荐列表的插件 =4:是清除视频流并调用js、功能和0差不多 =5:是暂停并且同时调用暂停广告 =6:会调用js函数(参考=0时),并且会退出全屏 |
v | 80 | 默认音量,0-100之间 |
p | 0 | 视频默认播放/暂停/不加载 = 0:暂停 = 1:自动播放 =2:默认不加载视频,点击时才加载视频 |
h | 0 | 播放http视频流时采用何种拖动方法, =0:不使用任意拖动 =1:按关键帧进行拖动 =2:是按关键时间点进行拖动 =3:是自动判断(如果视频格式是.mp4就按关键时间点,.flv就按关键帧) =4:是自动判断(只要包含字符mp4就按关键时间点,只要包含字符flv就按关键帧) |
q | "start" | 视频流拖动时参考参数,默认是start |
m | 无 | 视频链接地址,如果该值不为空,则用户点击播放器会跳转到该设置的网地址上,做视频广告时用到 |
o | 无 | 在设置p=2,即默认不加载视频的时候向播放器传递该视频的时间,单位:秒,也可以不传 |
w | 无 | 在设置p=2,即默认不加载视频的时候向播放器传递该视频的字节数,也可以不传 |
g | 0 | 视频直接g秒开始播放,这个功能类似跳过片头的功能,当然这个功能还可以用js来实现 |
j | 0 | 视频提前j秒结束,跳过片尾的功能 >0时,视频大于j秒时跳转至结束 <0时,视频大于(总时间-j秒)时跳转 |
k | 无 | 提示点时间,如 30|60鼠标经过进度栏30秒,60秒会提示n参数指定的相应的文字,这是以|隔开的一个数字数组 这个是鼠标经过进度栏上一些关键点时显示一个提示框,这些点需要自行设置,点的样式可以在配置文件里ck.pm_start参数设置 |
n | 无 | 提示点文字,跟k配合使用,各提示文字以|隔开,所以提示文字里不能有|,(如:提示点1|提示点2) |
b | 0 | 指定播放器是否进行交互,默认交互,b=1时不使用交互,所以在站外引用时需要设置ckplayer.xml里的里设置<flashvars>{b->1}</flashvars> |
z | 无 | 缓冲广告地址,只能是一个swf文件 |
wh | 无 | 固定视频比例,比如wh:'16:9',则视频将会以16:9的比例进行计算 |
lv | 0 | 是否是直播视频流。默认0不是,1是,当=1时,播放器会自动锁定进度栏和快进快退按钮 |
loaded | 无 | 当播放器加载成功后调用该参数定义的函数,字符类型 |
调用视频地址方式一:普通调用
以下的代码是演示普通方式调用视频地址的方法
<div id="video"><div id="a1"></div></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ f:'http://movie.ks.js.cn/flv/other/1_0.flv', s:0, c:0 }; CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars); </script>
普通的调用视频地址方式即当s=0(可以不设置)时,播放器会直接读取flashvars里的f值进行播放,此时f值必需要是一个可以播放的视频文件地址。
此时当你需要将多段视频拼合成一段大视频进行播放的话,则需设置f:'1.flv|2.flv|3.flv'这样的形式
调用视频地址方式二:网址形式调用
下面的代码演示如何通过调用一个网址(该网址输出视频地址)来播放视频
<div id="a1"></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ f:'http://www.ckplayer.com/down/url.php?id=[$pat]', a:'1', s:1, c:0 }; CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars); </script>
要使用该方式调用视频,需要注意如下几点:
1、s=1
2、f值可以设置在ckplayer.xml或ckplayer.js里,这样才能达到隐藏视频地址的功能,以ckplayer.js为例,我们可以找到ckstyle中的flashvars:'',设置一下
flashvars:'{f->http://www.ckplayer.com/down/url.php?id=[$pat]}',
在该处,甚至可以把其它的参数比如s也设置到flashvars里:
flashvars:'{f->http://www.ckplayer.com/down/url.php?id=[$pat]}{s->1}',
补充说明:如果你是使用的ckplayer.xml做为配置文件,则对应的设置应该是
<flashvars>{f->http://www.ckplayer.com/down/url.php?id=[$pat]}{s->1}</flashvars>
小知识:这二个参数里并不是只可以设置{f->}{s->},还可以设置更我的。比如前置广告暂停广告等都可以在此处设置,以方便统一管理。各参数都是{参数->值}的形式
这样你的调用代码只需要如下形式即可
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
a:'1',
c:0
};
CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>
当以上的代码出现在你的页面中时,普通用户是没法知道你的视频地址的
下面说下a值,a值是用来和f的值拼合组装成新的一个网页地址来供调用视频地址使用的。
a可以是单个值,也可以是数组的形式,如下
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
f:'http://www.ckplayer.com/down/url.php?[$pat]&id1=[$pat1]' ,
a:'2|3',
s:1,
c:0
};
CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>
这样播放器就会根据网址:video.php?id=2&id1=3来调用视频
需要注意的是F值中的&符号要变成%26
需要注意的是[$pat]和[$pat0]是相等的,都是调用a值里的第一个值的。
对应的替换符和值对应关系如下:
a:'a0|a1|a2|a3' | |
[$pat] | a0 |
[$pat0] | a0 |
[$pat1] | a1 |
[$pat2] | a2 |
[$pat3] | a3 |
调用视频地址方式三:xml格式调用
下面的代码演示如何通过调用一个xml形式的网址(该网址输出xml格式的视频地址)来播放视频
<div id="a1"></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ f:'http://www.ckplayer.com/down/xml.php?id=[$pat]', a:'1', s:2, c:0 }; CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars); </script>
要使用该方式调用视频,需要注意如下几点:
1、s=2
2、有关于xml的标准请参考http://www.ckplayer.com/down/xml.php?id=1
<?xml version="1.0" encoding="utf-8"?>
<ckplayer>
<flashvars>
{d->1.swf}
</flashvars>
<video>
<file>第一段视频地址</file>
<size>第一段视频的字节数,如果没有,可以直接删除该项,那么播放器就会自动计算字节</size>
<seconds>第一段视频的时间,秒数,没有也直接删除</seconds>
</video>
<video>
<file>第二段视频地址</file>
<size>第二段视频的字节数</size>
<seconds>第二段视频的秒数</seconds>
</video>
</ckplayer>
3、f值可以设置在ckplayer.xml或ckplayer.js里,这样才能达到隐藏视频地址的功能,以ckplayer.js为例,我们可以找到ckstyle中的flashvars:'',设置一下
flashvars:'{f->http://www.ckplayer.com/down/xml.php?id=[$pat]}',
在该处,甚至可以把其它的参数比如s也设置到flashvars里:
flashvars:'{f->http://www.ckplayer.com/down/xml.php?id=[$pat]}{s->1}',
补充说明:如果你是使用的ckplayer.xml做为配置文件,则对应的设置应该是
<flashvars>{f->http://www.ckplayer.com/down/xml.php?id=[$pat]}{s->1}</flashvars>
小知识:这二个参数里并不是只可以设置{f->}{s->},还可以设置更多的。比如前置广告暂停广告等都可以在此处设置,以方便统一管理。各参数都是{参数->值}的形式
这样你的调用代码只需要如下形式即可
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
a:'1',
c:0
};
CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>
当以上的代码出现在你的页面中时,普通用户是没法知道你的视频地址的
下面说下a值,a值是用来和f的值拼合组装成新的一个网页地址来供调用视频地址使用的。
a可以是单个值,也可以是数组的形式,如下
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
var flashvars={
f:'http://www.ckplayer.com/down/xml.php?[$pat]&id1=[$pat1]' ,
a:'2|3',
s:1,
c:0
};
CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars);
</script>
这样播放器就会根据网址:video.php?id=2&id1=3来调用视频
需要注意的是F值中的&符号要变成%26
需要注意的是[$pat]和[$pat0]是相等的,都是调用a值里的第一个值的。
对应的替换符和值对应关系如下:
a:'a0|a1|a2|a3' | |
[$pat] | a0 |
[$pat0] | a0 |
[$pat1] | a1 |
[$pat2] | a2 |
[$pat3] | a3 |
调用视频地址方式四:用flash插件调用
这种方法是对于有as3语言基础的人有用处
原理就是播放器会根据你的设置调用一个swf文件并且跟该文件进行交互,然后该文件向播放器发送视频地址(各段视频的时长,字节数)。然后播放器进行播放
<div id="a1"></div> <script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script> <script type="text/javascript"> var flashvars={ f:'http://www.ckplayer.com/down/geturl.swf', a:'1', s:3, c:0 }; CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1',600,400,flashvars); </script>
geturl.swf里的代码本教程提供一个简单的示例。在实际使用中需要你自行进行扩展
var ck:Object;
function setAppObj(app:Object):void{//系统保留,不能删除
ck=app;
Address();
}
function Address(){
ck.loadAddress("1.flv|2.flv","3000|3000","35|35");
}
setAppobj()该函数是用来接受播放器发送自身对象的,当播放器加载该插件(geturl.swf)后会判断里面是否有一个setAppobj的函数,有的话就把播放器自身当作一个对像传递给该函数,可以理解成
function setAppObj(播放器:Object):void{}
然后在该段代码里应该设置了ck=app所以ck就是指播放器(而不是指该插件)
下面的loadAddress是播放器里的一个函数,只要调用就可以发送初始化的视频地址了。
相关推荐
在网页开发中,FLV和F4V是两种常见的视频格式,主要用于在线流媒体播放。它们都是基于Flash技术的,因此在过去的Web时代,尤其是在HTML5视频标准普及之前,这两种格式非常流行。本文将深入探讨FLV和F4V的区别、它们...
该代码是一款在网页上播放视频的软件,主要特点是:免费,小巧,功能强大,定制方便。风格部分: 1:支持界面风格自定义 2:支持加密风格 常规功能: ...20:广告类型支持jpg,jpeg,png,gif,swf,mp4,flv,f4v
在技术层面,FLV-F4V格式支持各种编解码器,允许包含音频和视频信息的媒体内容在Adobe的播放器和媒体服务器之间进行流式传输。FLV格式最初用于支持Sorenson Spark编解码器进行视频编码,以及MP3和Nellymoser Asao编...
Flash视频播放器通常处理FLV或F4V格式的文件。FLV是早期的Flash视频格式,而F4V基于H.264编码,提供了更好的视频质量和压缩效率。 3. 视频解码: 播放器内部包含视频解码器,用于将FLV或F4V数据转换为可播放的帧...
CuPlayerFile String 视频文件地址 支持flv,mp4,mov,f4v,3gp格式视频文件 CuPlayerImage String 视频缩图 支持jpg,png,gif , 必须存在,否则将影响正常播放 CuPlayerWidth Number 播放器宽度 宽度值为像素 ...
仿新浪右下角视频弹窗播放器 视频弹出广告功能可以加视频广告链接 支持flv mp4 f4v格式视频 可以加视频广告链接 适合各类网站使用 1 精致小巧 炫酷迷你 这就是这款网页视频播放器的特点 2 播放器大小只有16kb 够小...
在Flash中,视频播放通常涉及到FLV或F4V格式的文件。Flash Player通过NetStream对象来处理视频流,它可以连接到视频源,加载视频数据,并将其解码为可以在舞台上显示的帧。 4. **Flash视频播放器组件** - `Video`...
软件分为加密和播放两部分,主要是针对FLV、F4V这类Flash视频文件进行加密,软件界面美观简洁、使用方便,加密速度快,质量高,对于用户来说是一款很不错的软件,小编这里推荐大家使用这款软件! 点量FLV视频加密...
点量FLV视频加密系统主要是针对FLV、F4V这类Flash视频文件进行加密,防止非授权用户的播放。 本系统分为两部分,具体介绍如下: FLV视频加密程序:负责对视频文件进行加密,可以将flv/f4v文件通过该软件进行...
1、网页在线播放flv、f4v、MP4等格式的视频,兼容手机端html5视频播放功能 2、播放器的皮肤风格可随意更换,本站还提供了大量的ckplayer风格,logo以及左上角水印图片等等都可以自己定义; 3、支持设置视频播放的...
本文将深入探讨如何将FLV和MKV格式的视频转换为MP4格式,以及相关的技术知识点。 首先,我们要了解FLV、MKV和MP4这三种视频格式的特点。FLV(Flash Video)是Adobe公司开发的一种流媒体格式,广泛用于网络视频,...
主要功能有如下:1、网页在线播放flv、f4v、MP4等格式的视频,兼容手机端html5视频播放功能2、播放器的皮肤风格可随意更换,本站还提供了大量的ckplayer风格,logo以及左上角水印图片等等都可以自己定义;...
点量FLV视频加密系统主要是针对FLV、F4V这类Flash视频文件进行加密,防止非授权用户的播放。 分为两部分,具体介绍如下: FLV视频加密程序:负责对视频文件进行加密,可以将flv/f4v文件通过该软件进行加密,加密后...
它支持多种视频格式,包括常见的HTTP协议下的FLV、F4V、MP4,同时也支持RTMP视频流和RTMP视频回放,这使得在不同网络环境下都能流畅播放视频内容。CKPlayer还特别兼容M3U8格式,这种格式常用于HLS...
2. **播放器功能**:CKplayer 6.3支持多种视频格式,除了FLV之外,还包括MP4、F4V等。它具备全屏播放、进度条控制、音量调节、视频暂停与播放、视频快进与倒退等功能,为用户提供流畅的观看体验。 3. **自定义皮肤*...
描述中提到“支持多种视频格式”,这表明该播放器兼容性较强,能够处理FLV、SWF、F4V等常见的Flash视频格式,甚至可能包括MP4、AVI、WMV等非Flash格式。这种多格式支持使得用户无需担心视频源的类型,从而提供了更好...
- 支持多种视频和音频格式,包括FLV、MP4、F4V等。 - 自定义皮肤和界面元素,通过CSS和JavaScript进行调整。 - 内置缓冲机制,提高视频播放流畅性。 - 嵌入式广告支持,可插入预加载、暂停和贴片广告。 - API...
1. **视频播放支持**:f4player能够支持多种视频格式,如FLV、F4V等,这些都是Flash平台常见的视频格式,使得它在网页上播放视频内容时具有良好的兼容性。 2. **轻量化设计**:f4player体积小,加载速度快,减少了...
1. 兼容性:强大的FLV播放器应能支持多种视频格式,除了FLV,还可能包括MP4、F4V、WMV、AVI等,提供全面的媒体播放解决方案。 2. 稳定性:流畅播放不卡顿,即使在网络环境不稳定的情况下也能保持良好的观看体验。 ...
F4V格式相比传统的FLV格式,具有更高的视频质量,更低的带宽需求,因此在互联网上得到广泛应用。 该播放器设计简洁,易于集成到网页中,为用户提供流畅的观看体验。尽管体积小巧,但其功能全面,包括但不限于播放...