很多人都喜欢使用ckplayer 视频播放器，因为它免费、开源、功能强大；所以我们出一期教程来教大家WordPress如何整合ckplayer，演示为Wordpress 6.0博客整合ckplayer X2，其他WordPress版本大同小异，皆可参考本教程，几乎都是可以的，本教程不同于其他教程，不需要输入简代码插件，点击按键一键就可插入视频，使用更加方便，如有疑问可在评论区说明！

Wordpress博客整合ckplayer X2视频播放器最新教程插图

ckplayer播放器介绍：

ckplayer播放器是一款用于网页上播放视频的HTML5视频播放器插件，ckplayer支持http协议上的flv、f4v、mp4格式及rtmp视频流格式播放，其特点在于用户可以自己定义播放器的风格，播放器完全开源，可用于直播或点播使用！

整合教程如下：

1.下载本帖附件ckplayer X2 SDK源码(目前官网最后最新版本已不适用本教程，请下载本帖附件)

Wordpress博客整合ckplayer X2视频播放器最新教程插图

2.下载解压后得到“ckplayer”，我们只需要将此文件夹打包后上传至我们WordPress网站的主题目录 “wp-content/themes/”。

Wordpress博客整合ckplayer X2视频播放器最新教程插图

3.找到 /wp-content/themes/你的主题/functions.php 文件，在“functions.php”文件里面添加如下代码：

隐藏内容
本内容需权限查看
  • 注册用户: 2积分
  • 会员用户: 免费
  • 永久会员: 免费
已有10人解锁查看

4.新建一个js文件，命名为“editor.js”，复制下面代码到其中（此文件已整合到下载附件中）：

(function() {
     tinymce.create('tinymce.plugins.vipiu', {
          init : function(ed, url) {
               /**
               * Inserts shortcode content
               */
               ed.addButton( 'button_ckplayer', {
                    text : '',
                    icon: 'wp-media-library',
                    title : '插入ckplayer视频',
                    onclick : function() {
                         ed.windowManager.open( {
                              title: '视频地址',
                              body: [{
                                   type: 'textbox',
                                   name: 'videoSrc',
                                   label: false,
                                   value: '',
                                   multiline: true,
                                   minWidth: 300,
                                   minHeight: 100
                              }],
                              onsubmit: function( e ) {
                                   ed.selection.setContent('[ckplayer]'+e.data.videoSrc+'[/ckplayer]');
								 
                              }
                         });
                    }
               });
          },
          createControl : function(n, cm) {
               return null;
          },
     });
     /* Start the buttons */
     tinymce.PluginManager.add( 'vipiu_button_script', tinymce.plugins.vipiu );
})();

5.将“editor.js”文件上传至第2步的主题文件夹下的“ckplayer”文件夹里

Wordpress博客整合ckplayer X2视频播放器最新教程插图

 

6.发布文章点击视频图标，输入视频地址即可调用

Wordpress博客整合ckplayer X2视频播放器最新教程插图

注：完成以上操作就能实现调用ckplayer视频播放器，不像其他教程一样需要输入简代码，点击图标即可使用，这样就比较方便！

其他说明

1.测试发现官网最新版的会出现“error 011:Config File loading failed or error”错误，目前还没研究，所以下载本贴附件的版本即可！

更新说明

  • 优化播放器在文章页的展示效果，默认宽度100%，高度400px
1.使用本站下载的源码仅限于个人学习和非商业用途。
2.禁止将本站下载的源码用于搭建或支持任何违法、淫秽、暴力或侵犯他人合法权益的网站或应用。
3.使用本站下载的源码需遵守国家法律法规及相关规定，不得从事任何违法活动。
4.如若本站内容侵犯了原著者的合法权益，请联系我们进行处理。