1. 前言
  2. 整合原理
  3. 开始整合
  4. 结束
  5. 注意事项
  6. 作者的话

一、 前言
大家都知道，ckplayer 是一款优秀的网页视频播放器，虽然有插件可以用，但是能不装插件就尽量不装插件，毕竟过多的插件会影响网站的相应速度。
但当我在网上搜索 ckplayer 的整合教程后，结果发现都不能用，仔细查看之后，都是老的 ckplayer 的调用代码，所以不能用，而且许多都是抄袭的。。。。于是我便亲自动手自己整合 ckplayer，最后整合成功，发现也并不难。

二、整合原理
其实 ckplayer 的使用方法非常简单，你只要在网页中插入 ckplayer 的调用代码，就可以成功的调用 ckplayer，这里呢我们把它再做成短代码的形式，方便调用。这样无论是古腾堡编辑器还是经典编辑器，都可以正常使用。

三、开始整合
1. 首先大家要去 ckplayer 官网下载 ckplayer 的文件，这里我们整合的是最新的 X 版本，至于测试版还是正式版无所谓。
下载完后，为了方便我们进行调试，建议上传至虚拟空间，通过网站的形式打开，下面是在虚拟空间打开 index.html 文件的效果

2. 我们上传压缩包里面的 ckplayer 文件夹到网站根目录，记得别多传一个 ckplayer 文件夹了。

3. 然后我们点击 “仅 h5 播放演示”，因为这个最简单，而且 h5 播放器在所有平台上都可以使用。

接着右键，选择查看 “网页源代码”，我们便可以得到调用 ckplayer 的代码了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="video" style="width: 600px; height: 400px;">
</div>
<script type="text/javascript" src="../ckplayer/ckplayer.js">
</script>
<script type="text/javascript">
    var videoObject = {
        container: '#video',
        //容器的ID或className
        variable: 'player',
        //播放函数名称
        poster: '../material/poster.jpg',
        //封面图片
        video:  [ //视频地址列表形式
         ['http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4', 'video/mp4', '中文标清', 0], ['http://img.ksbbs.com/asset/Mon_1703/d0897b4e9ddd9a5.mp4', 'video/mp4', '中文高清', 0], ['http://img.ksbbs.com/asset/Mon_1703/eb048d7839442d0.mp4', 'video/mp4', '英文高清', 10], ['http://img.ksbbs.com/asset/Mon_1703/d30e02a5626c066.mp4', 'video/mp4', '英文超清', 0], ]
    };
    var player = new ckplayer(videoObject);
</script>

这个下面是我调整过后的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="video" style="width: 600px; height: 400px;">
</div>
<script type="text/javascript" src="../ckplayer/ckplayer.js">
</script>
<script type="text/javascript">
    var videoObject = {
        container: '#video',
        //容器的ID或className
        variable: 'player',
        //播放函数名称
        poster: '../material/poster.jpg',
        //封面图片
        video: //视频地址列表形式
         ['你的视频地址', 'video/mp4', '中文标清', 0],
    };
    var player = new ckplayer(videoObject);
</script>

然后选择代码编辑器，把上面的代码复制进去就可以了

4. 下面是整合成短代码的教程

首先，我们要找到当前使用的主题文件夹，一般是 \wp-content\themes\ 你的主题名称 \
这个文件夹里面，然后打开 functions.php 这个文件，（记住千万不能用记事本，不然会出现编码问题，我推荐用 notepad++）然后添加一下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
add_shortcode("ckplayer", "ckplayer");
function wp_ckplayer($atts, $content = null) {
    return "
<div id=\\"video\\"></div>
<script type=\\"text / javascript\\" src=\\" / ckplayer / ckplayer.js\\" charset=\\"utf - 8\\"></script>
<script type=\\"text / javascript\\">
var videoObject = {
container: '#video', //容器的ID或className
variable: 'player',//播放函数名称
poster:'../material/poster.jpg',//封面图片
mobileCkControls:true,//是否在移动端（包括ios）环境中显示控制栏
mobileAutoFull:false,//在移动端播放后是否按系统设置的全屏播放
h5container:'#videocontainer',//h5环境中使用自定义容器
video: [//视频地址列表形式
['".$content."', 'video/mp4', '中文标清', 0\],
]
};
var player = new ckplayer(videoObject);
</script>
";
}

然后在调用时，就可以使用 [ckplayer][/ckplayer] 来调用了。

四、结束

其实就是一个小小的调用 js 代码，也并没有多难。

五、注意事项

如果发现播放器没有正常出现，先要检查两个地方，如果你是用的短代码，则要去检查网页源代码中 ckplayer 的代码是否被成功调用，如果成功被调用，则要检查 js 是否被调用，最简单的方式就是点击

1
<script type="text/javascript" src="../ckplayer/ckplayer.js"></script>

中的 “…/ckplayer/ckplayer.js”， 然后看是否定义到指定文件，如果是 404，则说明你的 ckplayer 的文件夹没放对，如果不是 404，就有可能是你的参数设置有问题（就是 “var videoObject = {” 后面的东西），如果还是不行的话，就在下面留言吧。

六、作者的话

最后祝大家成功整合
对于有些链接会转到外部网站的一篇文章，在此做说明：那篇文章也是我发布的，只是在这里重新发布一次