网页中常见的功能就是播放视频,下面介绍的这个ckplayer.js既可以在pc端播放,也可以在手机网页上播放。
可调用flash也可以调用html5播放器:
<div id="a1"></div><script type="text/javascript" src='/images/loading.gif' data-original="ckplayer/ckplayer.js" charset="utf-8"></script><script type="text/javascript"> var flashvars={ f:'http://movie.ks.js.cn/flv/other/1_0.mp4', c:0, loaded:'loadedHandler' }; 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);</script>
CKobject.embed(
'flash播放器文件路径',
'容器ID',
'播放器的ID',
'宽度,可以是百分比',
'高度,可以是百分比',
优先调用设置,false=优先调用flash播放器,true=优先调用HTML5播放器
flash播放器的初始化参数,以及HTML5初始化参数,比如默认播放/暂停等设置,详细的可以参考【flashvars里各参数的说明】这一版块
HTML5视频播放地址,数组形式,详细的可参考HTML5视频调用的说明
)
只调用flash播放器:
<div id="a1"></div><script type="text/javascript" src='/images/loading.gif' data-original="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, b:1 }; var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'}; CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params); </script>
CKobject.embedSWF('flash播放器路径',
'放置播放器的容器ID',
'播放器的ID',
'宽度,支持百分比',
'高度,支持百分比',
flashvars对象,初始化播放器参数,
相关的配置,如:背景色,是否允许全屏,是否允许交互,播放器是否透明
);
只调用HTML5播放器:
<div id="a1"></div><script type="text/javascript" src='/images/loading.gif' data-original="ckplayer/ckplayer.js" charset="utf-8"></script><script type="text/javascript"> var flashvars={ p:1, e:1 }; 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']; var support=['all']; CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);</script>
CKobject.embedHTML5('放置播放器的容器的ID',
'播放器ID',
'宽高,支持百分比',
'高度,支持百分比',
视频地址,数组,因为不同的平台支持的视频格式不同,所以需要尽量多的视频格式来兼容,
初始化配置参数,比如默认是否播放,
在哪些平台上使用,all是指全部平台都调用
);
其中
/**注意,flashvars中的参数: v:ckplayer_volume,视频默认音量 0-100 之间,默认为 85。 p:ckplayer_play,是否自动播放,可以为 1 或 0,默认为 1,参数不为 1 时播放器加载完成后均为暂停状态。 f:ckplayer_flv,视频地址,默认为空,可以是单独视频地址、url 地址列表文件、*/
下面贴一个实例代码:
html代码:
<div id="video_c"></div>
css代码:
#video_c{ width:840px; height:353px;margin:0 auto;}
js代码:
<script type="text/javascript" src='/images/loading.gif' data-original="ckplayer/ckplayer.js"></script><script type="text/javascript">var flashvars={ f:'ckplayer/video/1_0.flv', p:0 //i:'http://www.ckplayer.com/static/images/letitgo.jpg' //视频播放器初始图片地址,即封面图片,默认为空。 };var video=['ckplayer/video/1_0.mp4->video/mp4'];CKobject.embed('ckplayer/ckplayer.swf','video_c','ckplayer_a1','100%','100%',false,flashvars,video);</script>
结果截图如下如下:
参考地址:
ckplayer官网:http://www.ckplayer.com/
参数介绍链接:http://www.fufuok.com/demo/ckplayer/z.html
作者:风雨后见彩虹
出处:http://www.cnblogs.com/moqiutao/
如果您觉得本文对您的学习有所帮助,请多支持与鼓励。
原标题:ckplayer.js视频播放插件
关键词:JS