5.1 织梦CMS 基于酷播V4.0免费播放器的应用

 

织梦内容管理系统(DedeCMS)是国内专业的PHP网站内容管理系统,采用XML名字空间风格核心模板:模板全部使用文件形式保存,对用户设计模板、网站升级转移均提供很大的便利,健壮的模板标签为站长DIY 自己的网站提供了强有力的支持。

 

2016-2-19更新:为适应用户基于织梦dedecms多终端跨平台观看的须求,新增“多终端跨平台安装”的教程:
多终端跨平台的目标在于实现:PC端,安卓端,IOS苹果端,微信都可以打开观看视频播放:

 

 

织梦CMS文章加视频效果:

织梦文章[演示1] 织梦文章[演示2]

 

织梦CMS列表效果:

[列表演示1] [列表演示2] [列表演示3] [列表演示3]

 

 

前期工作:请将下载的播放器文件( 点此下载(2016-11-21更新)),解压后,将player目录,上传到你网站根目录下,使得自带的测试用页面 http://www.你的网站.com/player/index.html 可以正常打开,参考如下图:

安装开始,首先,你要按自己的实际情况,添加你要通过后台管理的播放器相关参数,比如视频地址,广告地址,广告链接等,本站以在文章模型中添加视频地址参数为例,来介绍说明整个过程。进入织梦管理系统后台,打开 内容模型管理 > 普通文章:

然后点[确定],这样,你添加的[视频地址]字段flvurl就添加进了文章模型的表中了。
添加好了[视频地址]字段flvurl后,你再添加文章时,就会看到,视频地址字段已已经显示在面版中了,如下图:

现在,再看介绍一下模版的修改(以下是直接修改织梦默认的文章模版,你如果想为单个栏目附加一个单独的模版也是可以的,在内容发布>栏目管理>更改>高级选项中,给不同的栏目附加不同的模版,这也是可以的,改模版的方式是一样的,如下),打开你要添加播放器的内容页模版:

找到相应的位置,比如这段代码之后
{dede:field.description runphp='yes'}
if(@me<>'' )@me = '
<div class="intro">'.@me.'</div>
';
{/dede:field.description}
添加极酷播放器,如下(以下供参考,请根据你实际情况进行调整):
调用方式之一(跨平台调用代码):

<!-- 酷播V4.05跨平台代码/开始 -->
<div class="video" id="CuPlayer">
<script type="text/javascript">
<!--
var vID = "c1"; //vID
var vWidth = "600"; //宽度设定,配合CSS实现
var vHeight = "400"; //高度设定,配合CSS实现
var vFile = "/player/CuSunV4set.xml"; //配置文件地址:支持五种广告设定
var vPlayer = "/player/player.swf?v=4.0"; //播放器文件地址
var vPic = "/player/pic/pic01.jpg"; //视频缩略图
var vCssurlv = "/player/css/videos.min.css"; //CSS文件
var vAutoPlay = "yes"; //是否自动播放
var vEndTime = 0; //预览时间(秒数),默认为0
var vLogoPath = "/player/images/logo.png"; //Logo地址
var vPlayMod = 0; //播放模式优先级,默认=0,html5优先=1,flash优先=2
var vMp4url = "{dede:field.flvurl/}";//视频文件地址推荐用mp4文件(h264编码)
if (vMp4url==undefined || vMp4url=="" || vMp4url==null) {
document.getElementById('CuPlayer').style.display = "none";
}
//-->
</script>
<script class="CuPlayerVideo" data-mce-role="CuPlayerVideo" type="text/javascript" src="/player/js/player.min.js"></script>
</div>
<!-- 酷播V4.05跨平台代码/结束 -->

 

调用方式之二(flash调用代码):

<!--极酷播放器/代码开始-->
<script type="text/javascript" src="/player/images/swfobject.js"></script>
<div class="video" id="CuPlayer"><b><img src="/player/images/loading.gif" /> 网页视频播放器加载中,请稍后...</b></div>
<script type="text/javascript">
var flvpath = "{dede:field.flvurl/}";
var so = new SWFObject("/player/player.swf","ply","600","410","9","#000000");
so.addParam("allowfullscreen","true");
so.addParam("allowscriptaccess","always");
so.addParam("wmode","opaque");
so.addParam("quality","high");
so.addParam("salign","lt");
//播放器设置文件-----------------------------
so.addVariable("JcScpFile","/player/CuSunV4set.xml");
//视频文件及略缩图--------------------------
//so.addVariable("JcScpServer","rtmp://www.yoursite.com/vod");
so.addVariable("JcScpVideoPath","{dede:field.flvurl/}");
so.addVariable("JcScpImg","/player/images/startpic.jpg");
//-----------------------------------------
so.addVariable("JcScpSharetitle","酷播使用官方演示实例");
if (flvpath==undefined || flvpath=="" || flvpath==null) {
document.getElementById('CuPlayer').style.display = "none";
} else {
so.write("CuPlayer");
}

</script>
<SCRIPT language=javascript src="images/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT language=javascript src="images/action.js" type=text/javascript></SCRIPT>
<!--极酷播放器/代码结束-->

以上红色部分{dede:field.flvurl/},就是刚才添加的视频地址字段,用于调出你的视频文件地址。参见图片示意如下:

OK,全部完成了,你此添加一条文章,就会看到如下图带视频的播放器的效果:


 


我要下载 获取使用帮助