如何正确使用CKplayerJS来实现视频播放和交互控制？

ckplayer.js 是一款在网页上播放视频的免费视频插件，它兼容性强、使用简单且 API 齐全，以下是对ckplayerjs用法的具体介绍：

1、基本使用方法

引入核心文件：在HTML文件中引用ckplayer.js 核心文件。

     <script src="ckplayer/ckplayer.js" type="text/javascript" charset="utf-8"></script>

创建容器：在需要使用播放器的位置放置一个带有id的div元素。

     <div id="ckplayer"></div>

嵌入播放器：用CKobject对象的embed方法调用并渲染播放器。

     CKobject.embed('ckplayer/ckplayer.swf', 'ckplayer', 'ckplayer1', '600', '400', true, {f: "video/1.mp4", c: 0}, ['video/1.mp4->video/mp4']);

2、参数说明

flash播放器文件路径：用于加载flash播放器的文件路径，必须为ckplayer.swf 文件。

容器ID：用于绑定到网页中的容器ID。

播放器ID：将播放器替换绑定到网页后的播放器id。

宽度：可以是百分比或具体数值。

高度：可以是百分比或具体数值。

优先调用设置：false=优先调用flash播放器，true=优先调用HTML5播放器。

初始化参数：包括flash播放器和HTML5的初始化参数，比如默认播放/暂停等设置。

HTML5视频播放地址：数组形式，详细的可参考HTML5视频调用的说明。

3、自定义播放器

修改logo：可以通过修改ckplayer.js 和ckplayer.xml 文件中的属性来更改播放器的logo。

     mylogo: 'logo.swf', //logo资源
     pm_mylogo: '1,1,-100,-55'

     <logo file="cklogo.png" pm="2,0,-100,20"/>

控制位置的含义：水平对齐方式（0是左，1是中，2是右），垂直对齐方式（0是上，1是中，2是下），水平偏移量，垂直偏移。

4、高级功能

监听播放器状态：可以使用JavaScript监听播放器的各种状态。

控制播放器操作：可以使用JavaScript控制播放器的各种操作。

支持多种视频格式：支持mp4, flv, m3u8, ts等格式。

播放形式支持：支持点播、直播、直播+回放。

平台支持：支持移动端和PC端。

5、安装教程

上传文件：不存在安装过程，将下载包里的ckplayer 文件夹上传到网站环境中。

引入样式和脚本：在需要播放视频的页面上引入ckplayer.css 和ckplayer.js 文件。

     <link type="text/css" rel="stylesheet" href="ckplayer/css/ckplayer.css" />
     <script type="text/javascript" src="ckplayer/js/ckplayer.js" charset="UTF-8"></script>

定义视频对象：在需要插入视频的地方使用如下代码。

     var videoObject = {
         container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
         video: 'http://ckplayer-video.oss-cn-shanghai.aliyuncs.com/sample-mp4/05cacb4e02f9d9e.mp4'//视频地址
     };
     var player = new ckplayer(videoObject);//初始化播放器

相关问题与解答

问题1：如何在ckplayer中只调用flash播放器？

答案：要在ckplayer中只调用flash播放器，可以使用embedSWF 方法，示例代码如下：

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);

flashvars 对象包含初始化播放器的参数，params 对象包含相关的配置，如背景色、是否允许全屏、是否允许交互、播放器是否透明等。

问题2：如何在ckplayer中只调用HTML5播放器？

答案：要在ckplayer中只调用HTML5播放器，可以使用embedHTML5 方法，示例代码如下：

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);

flashvars 对象包含初始化播放器的参数，video 数组包含HTML5视频播放地址，support 数组指定在哪些平台上使用。

到此，以上就是小编对于“ckplayerjs的用法”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。