欢迎来到站长教程网!
兔子CDN

DedeCMS

当前位置:主页 > CMS教程 > DedeCMS >

织梦dedecms整合添加ckplayer播放器支持flv,mp4等播放功能

时间:2020-09-12|栏目:DedeCMS|点击:

现在很多DEDE开发的视频网站使用的播放器是ckplayer,这个播放器功能非常强大,支持flv,mp4,swf等各种类型的文件播放器。当我们的视频不想上传到youku等视频网站时,可以使用这个播放器,这样可以自己控制自己的视频长度,清晰度,还可以给自己的视频添加上播放前的广告,我们都知道视频网站都都是以广告形式来生存的,所以,我们在上传了我们的视频后,就等于给这些视频网站提供了广告载体。如果您想自己在视频上面做广告,或是自己想拥有自己的个性的播放器,您可能使用ckplayer。

但是,ckplayer整合到DEDE稍微有点难度,这里就详细讲一下如何正确整合。

织梦整合ckplaery播放器步骤:

第一步:下载播放器代码,官方网站是 http://www.ckplayer.com

把下载下来的代码解压后,把文件夹ckplayer放到网站根目录(当然,您可以根据自己的需要放到相应原目录里面,我这里以放到网站根目录为例子)。

如果你的播放需要 白天/黑夜 功能也一起把js文件夹放到网站根目录里面。我这里不需要这个功能,所以,只上传ckplayer到网站根目录。

第二步:在织梦系统添加字段 ckurl,用来上传 mp4文件用的字段,如下图所示:

织梦dedecms整合添加ckplayer播放器支持flv,mp4等播放功能

数据类型选择-多媒体文件

第三步:修改播放器代码路径和添加标签:

播放器代码是:

<div id="a1"></div>

<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
  var flashvars={
    f:'http://www.bnxb.com/upload/180105/12389514.mp4',
    c:0,
    b:1,
    i:'http://www.ckplayer.com/static/images/cqdw.jpg'
    };
  var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
  CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
  /*
  CKobject.embedSWF(播放器路径,容器id,播放器id/name,播放器宽,播放器高,flashvars的值,其它定义也可省略);
  下面三行是调用html5播放器用到的
  */
  var video=['http://www.bnxb.com/upload/180105/12389514.mp4'];
  var support=['iPad','iPhone','ios','android+false','msie10+false'];
  CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
 
 
  function closelights(){//关灯
    alert(' 本演示不支持开关灯');
  }
  function openlights(){//开灯
    alert(' 本演示不支持开关灯');
  }
  </script>

这段代码是ckplayer提供的演示的例子里面的代码,您可以根据ckplayer播放器官方提供的例子,自己生成不同的播放器风格,如果您想做成一个比较个性的播放器,请到官方网站去配置播放器吧,这里不再一一讲解,配置很简单。

这里要改的文件是js文件和一个播放器文件的路径,即 ckplayer.js和ckplayer.swf的路径为根目录。

写上上面我们添加的字段,即写上织梦标签调用,分别是:

  f:'{dede:field.vurl/}',

  var video=['{dede:field.vurl/}'];

改好的代码是:

<div id="a1"></div>

<script type="text/javascript" src="/ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
  var flashvars={
    f:'{dede:field.vurl/}',
    c:0,
    b:1,
    i:'http://www.ckplayer.com/static/images/cqdw.jpg'
    };
  var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
  CKobject.embedSWF('/ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
  /*
  CKobject.embedSWF(播放器路径,容器id,播放器id/name,播放器宽,播放器高,flashvars的值,其它定义也可省略);
  下面三行是调用html5播放器用到的
  */
  var video=['{dede:field.vurl/}'];
  var support=['iPad','iPhone','ios','android+false','msie10+false'];
  CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
 
 
  function closelights(){//关灯
    alert(' 本演示不支持开关灯');
  }
  function openlights(){//开灯
    alert(' 本演示不支持开关灯');
  }
  </script>

上面标红的就是改后的内容,你可以对比一下就可以看出我修改过的代码了,如果您也是把ckplayer放在根目录里面,您添加的字段也是vurl的话,你可以直接使用上面我改好的代码。

第四步:把上面的代码添加到模文件里面,我把上面的代码添加到了article_article.htm里面,要在哪个栏目里面使用视频播放就在哪个栏目里面对应的内容页模板添加上面的代码。

第五步:上传视频或添加mp4url地址进行测试

1)添一个mp4视频:

视频文件是:http://www.bnxb.com/upload/180105/12389514.mp4->video/mp4

如下图所示:

织梦dedecms整合添加ckplayer播放器支持flv,mp4等播放功能

效果如下:

织梦dedecms整合添加ckplayer播放器支持flv,mp4等播放功能

已经添加成功了,这是一个外链,但是,我们一般都是上传mp4视频文件。

2) 上传一个mp4视频:

上一篇:织梦模板DEDECMS文章页实现让用户选择字体大小的代码的方法

栏    目:DedeCMS

下一篇:没有了

本文标题:织梦dedecms整合添加ckplayer播放器支持flv,mp4等播放功能

本文地址:www.dtcnnet.com/DedeCMS/29454.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长网 版权所有 苏ICP备20040415号