DedeCMS整合CKplayer

DedeCMS整合CKplayer

官方网站:

http://www.dedecms.com

http://www.ckplayer.com

环境:

CentOS 7.2

nginx-1.10.1

php-7.0.11

mariadb-10.1.18

DedeCMS-5.7 SP1(UTF-8)

ckplayer-6.8

前提是，dedecms己经成功运行

一.dedecms建立字段

点击添加字段

 

视频地址

video

系统自动生成表单字段

多媒体文件(方便我从本地传文件或直接填写网络视频的地址)

提交

提交完就可以看到新增了一个视频地址的字段，接着返回基本设置，列表附加字段这里加一个video，添加了之后，我们在文章调用直接是{dede:field.video/}。

到这一步，字段建立完成。

二.解压ckplayer

官方链接 http://www.ckplayer.com/down/ckplayer6.8.zip

提示:解压到网站根目录下的ckplayer目录,这里的根目录是指apache(DocumentRoot)/nginx(root)等配置文件里指定的目录, 如果放到其它目录如dede/ckplayer则需要修改article_article.htm模板中调用ckplayer相关js的路径。

我这里nginx的根在/opt/nginx/html，所以

mkdir /opt/nginx/html/ckplayer

cd /opt/nginx/html/ckplayer

unzip ckplayer6.8.zip

三.修改织梦模板

织梦默认的文章内容页是dede/templets/default/article_article.htm

 

可以直接以ckplayer官方包里的ckplayer/index.html为蓝本往article_article.htm模板添加js和script几段即可。

这里提供下修改好的模板，直接覆盖原目录的dede/templets/default/article_article.htm

https://github.com/liujun1990/dedecms/blob/master/article_article.htm

ckplayer.js中的广告项，大家可以按需启用，这里也提供下没有广告的ckplayer.js

https://github.com/liujun1990/dedecms/blob/master/ckplayer.js

四.测试

功能开启，如广告的开关等，都可以在ckplayer.js中的setup变量中指定，中文注释非常明了，这里就不多说。

BUG:

凡是通过article_article.htm生成的文章，不管有没有指定视频地址，所有的应用该模板的文章都会出现一个CKplayer的播放框。翻遍[6.4-6.6整合教程] 织梦dedecms整合ckpalyer新方法详细教程（非插件） 所有留言，没有一个人提到这个问题，无赖只得百度。

没有现成的解决方案，但有思路：

1.想办法隐藏掉id="a1"的div也就是模板中加入的CKplayer播放器，可以通过JavaScript定位到该div将其隐藏。但如果直接隐藏的话，正常视频的也会被隐藏掉。

2.给定隐藏条件。当发文章是填入了视频地址时不隐藏，为空则不隐藏

解决办法:

修改模板article_article.htm

1.290行前后加入判断条件，仅视频地址不为空(DedeCMS后台发文时填入了视频地址)时才将动态生成的object嵌入id='a1'的div，否则不嵌入div （使该div内容为空)

2.在合适的位置(script标签段内)加入判断，当id='a1'的div内容为空时将其隐藏。

       

        if (flashvars['f']!=''){

CKobject.embed('/ckplayer/ckplayerckplayer.swf','a1','ckplayer_a1','600','400',false,flashvars,video,params);

        }   

        var ckplayerAutoDisplay=document.getElementByIdx_x_x_x_x_x('a1');

        if (ckplayerAutoDisplay.innerHTML==null||ckplayerAutoDisplay.innerHTML.length==0){

                ckplayerAutoDisplay.style.display='none';

        } 

更新后的模板见https://raw.githubusercontent.com/liujun1990/dedecms/master/article_article.htm

效果图如下