下载鸥 > 网站下载 > 开发教程 > 帝国CMS

帝国cms7.5二次开发整合CKPlayer播放器教程

665 2020-11-28 11:11:45

收藏

简述

将帝国cms7.5编辑器整合CKPlayer播放器,支持一个页面多个视频播放
帝国cms7.5整合CKPlayer播放器教程说明:将帝国cms7.5编辑器整合CKPlayer播放器,支持一个页面多个视频播放。

 

帝国cms7.5整合CKPlayer播放器教程步骤

1、下载ckplayer播放器,下载地址:http://www.ckplayer.com/down/

2、解压后放置 /e/data/ckplayer/目录

3、替换信息编辑器中的视频上传js控件,路径为:/e/admin/ecmseditor/infoeditor/plugins/etranmedia/dialogs/etranmedia.js
 

(function() {  
    CKEDITOR.dialog.add("etranmedia",   
    function(ecmseditorv) {  
        return {  
            title: "插入视频",  
            minWidth: "500",  
            minHeight:"400",  
            contents: [{  
                id: "etmediainfo1",  
                label: "常规",  
                title: "常规",  
                expand: true,  
                width: "500px",  
                height: "400px",  
                padding: 0,  
                elements: [
                        {type:"hbox",widths:["90%","10%"],align:"right",children:[
                    {id:"etmediaurl",type:"text",label:"<strong>视频地址</strong> ",style:"width:100%;float:left;","default":""}
                    ,{type:"button",id:"browse",filebrowser:{action:"Browse",target:"etmediainfo1:etmediaurl",url:ecmseditorv.config.filebrowserFlashUploadUrl+'FileMain.php?'+ecmseditorv.config.filebrowserImageBrowseUrl+'&doecmspage=TranMedia&type=3&tranfrom=1&field=&InstanceId='+ecmseditorv.id+'&InstanceName='+ecmseditorv.name},style:"display:inline-block;margin-top:14px;",hidden:!0,label:"选择"}]},
                     
                    {type:"hbox",widths:["25%","25%","25%","25%"],align:"right",children:[
                    {id:"etmediawidth",type:"text",label:"宽度",style:"width:100%;float:left","default":"100%"},
                    {id:"etmediaheight",type:"text",label:"高度",style:"width:100%;float:left","default":"auto"},
                     
                    {
                        id: 'etmediatoplay',
                        type: 'select',
                        label: '播放器',
                        default:"7",
                        items: [
                            [ '自动选择', '0' ],
                            [ 'HTML5Video', '5' ],
                            [ 'HTML5Audio', '6' ],
                            [ 'Media Player', '1' ],
                            [ 'Real Player', '2' ],
                            [ 'Flv Player', '3' ],
                            [ 'Flash Player', '4' ],
                            [ 'CKPlayer', '7' ]
                        ]
                    },
                     
                    {
                        id: 'etmediaplaymod',
                        type: 'select',
                        label: '播放模式',
                        items: [
                            [ '自动播放', '0' ],
                            [ '手动播放', '1' ]
                        ]
                    }
                    ]},
                     
                    {type:"html",id:"preview",style:"width:100%;",html:"<div><strong>"+CKEDITOR.tools.htmlEncode(ecmseditorv.lang.common.preview)+
"</strong>:<a onclick=etmediaview('cke_MediaPreviewBox_"+ecmseditorv.name+"');>[点击这里显示预览]</a><br><div id='cke_MediaPreviewBox_"+ecmseditorv.name+"' class='MediaPreviewBox'></div></div>"}
                 
                ]  
            },
             
{id:"Upload",label:ecmseditorv.lang.image.upload,elements:[
    { 
         type: "html",
       style: "width:500;height:250",
       html: ' <IFRAME frameBorder="0" id="edtmedia'+ecmseditorv.name+'" name="edtmedia'+ecmseditorv.name+'" scrolling="auto" src="'+ecmseditorv.config.filebrowserFlashUploadUrl+'editorpage/ecmseditorpage.php?'+ecmseditorv.config.filebrowserFlashBrowseUrl+'&doecmspage=TranMedia&type=3&InstanceId='+ecmseditorv.id+'&InstanceName='+ecmseditorv.name+'&CKEditorFuncNum='+ecmseditorv._.filebrowserFn+'&langCode='+ecmseditorv.langCode+'" style="HEIGHT:250px;VISIBILITY:inherit;WIDTH:100%;Z-INDEX:2"></IFRAME>'
    }
]},
             
             
            ],  
            onOk: function() {  
                var ehtmlstr='';
                var emediaurl=this.getValueOf('etmediainfo1','etmediaurl');
                var ewidth=this.getValueOf('etmediainfo1','etmediawidth');
                var eheight=this.getValueOf('etmediainfo1','etmediaheight');
                var etoplay=this.getValueOf('etmediainfo1','etmediatoplay');
                var eplaymod=this.getValueOf('etmediainfo1','etmediaplaymod');
                ehtmlstr=etmediaViewFile(emediaurl,ewidth,eheight,etoplay,eplaymod);
                //点击确定按钮后的操作    
                ecmseditorv.insertHtml(ehtmlstr);
                document.getElementById('cke_MediaPreviewBox_'+ecmseditorv.name).innerHTML='';
            },
             
            onCancel: function() {
                document.getElementById('cke_MediaPreviewBox_'+ecmseditorv.name).innerHTML='';
            }
             
        }  
    })  
})(); 
 
 
//预览
function etmediaview(viewid){ 
    var ehtmlstr='';
    var emediaurl=CKEDITOR.dialog.getCurrent().getContentElement('etmediainfo1','etmediaurl').getValue();
    var ewidth=CKEDITOR.dialog.getCurrent().getContentElement('etmediainfo1','etmediawidth').getValue();
    var eheight=CKEDITOR.dialog.getCurrent().getContentElement('etmediainfo1','etmediaheight').getValue();
    var etoplay=CKEDITOR.dialog.getCurrent().getContentElement('etmediainfo1','etmediatoplay').getValue();
    var eplaymod=CKEDITOR.dialog.getCurrent().getContentElement('etmediainfo1','etmediaplaymod').getValue();
    ehtmlstr=etmediaViewFile(emediaurl,ewidth,eheight,etoplay,eplaymod);
    document.getElementById(viewid).innerHTML=ehtmlstr;
}
function get_uid(){
    function S4() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    }
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}
//返回播放器代码
function etmediaViewFileCode(toplay,width,height,autostart,furl){
    var fname='';
    var addauto='';
    if(autostart=="true")
    {
        addauto=' autoplay="autoplay"';
    }
    if(toplay==1)//media
    {
        imgstr="<object align=middle classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" class="OBJECT" id="MediaPlayer" width=""+width+"" height=""+height+""><PARAM NAME="AUTOSTART" VALUE=""+autostart+""><param name="ShowStatusBar" value="-1"><param name="Filename" value=""+furl+""><embed type="application/x-oleobject codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" flename="mp" src=""+furl+"" width=""+width+"" height=""+height+""></embed></object>";
    }
    else if(toplay==5)//html5video
    {
        imgstr='<video id="ecmsvideoid" width="'+width+'" height="'+height+'" controls="controls"'+addauto+'><source src="'+furl+'"></source> Your browser is not supported </video>';
    }
    else if(toplay==6)//html5audio
    {
        imgstr='<audio id="ecmsaudioid" src="'+furl+'" controls="controls"'+addauto+'> Your browser is not supported </audio>';
    }
    else if(toplay==3)//flv
    {
        imgstr="<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width=""+width+"" height=""+height+""><param name="movie" value="/e/data/images/flvplayer.swf?vcastr_file="+furl+"&vcastr_title="+fname+"&BarColor=0xFF6600&BarPosition=1&IsAutoPlay="+autostart+""><param name="quality" value="high"><param name="allowFullScreen" value="true" /><embed src="/e/data/images/flvplayer.swf?vcastr_file="+furl+"&vcastr_title="+fname+"&BarColor=0xFF6600&BarPosition=1&IsAutoPlay="+autostart+"" allowFullScreen="true"  quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width=""+width+"" height=""+height+""></embed></object>";
    }
    else if(toplay==4)//flash
    {
        imgstr="<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width=""+width+"" height=""+height+""><param name="movie" value=""+furl+""><param name="quality" value="high"><embed src=""+furl+"" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width=""+width+"" height=""+height+""><param name="autoplay" value=""+autostart+"" /></embed></object>";
    }
    else if(toplay==7)//CKPlayer
    {
        var uid = get_uid();
        var vid = "video-"+uid;
        var pid = "player-"+uid;
       imgstr=`<div class="videoplayer-box" id="`+pid+`" style="width:`+width+`;height:`+height+`">
                    <video class="videoplayer" id="`+vid+`" src="`+furl+`" `+addauto+` width="100%" height="100%"></video>
                </div>
                <script src="/e/data/ckplayer/ckplayer.js"></script>
                <script type="text/javascript">
                    new ckplayer({
                        container: '#`+pid+`',
                        variable: 'player',
                        poster:'',
                        mobileCkControls:true,
                        mobileAutoFull:false,
                        h5container:'#`+vid+`',
                        video:'`+furl+`'
                    });
                </script>`;
    }
    else//reaplayer
    {
        imgstr="<object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=""+height+"" ID="Player" WIDTH=""+width+"" VIEWASTEXT><param NAME="_ExtentX" VALUE="12726"><param NAME="_ExtentY" VALUE="8520"><param NAME="AUTOSTART" VALUE=""+autostart+""><param NAME="SHUFFLE" VALUE="0"><param NAME="PREFETCH" VALUE="0"><param NAME="NOLABELS" VALUE=0><param NAME=CONTROLS VALUE=ImageWindow><param NAME=CONSOLE VALUE=_master><param NAME=LOOP VALUE=0><param NAME=NUMLOOP VALUE=0><param NAME=CENTER VALUE=0><param NAME=MAINTAINASPECT VALUE=""+furl+""><param NAME=BACKGROUNDCOLOR VALUE="#000000"></object><br><object CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=32 ID="Player" WIDTH=""+width+"" VIEWASTEXT><param NAME=_ExtentX VALUE=18256><param NAME=_ExtentY VALUE=794><param NAME=AUTOSTART VALUE=""+autostart+""><param NAME=SHUFFLE VALUE=0><param NAME=PREFETCH VALUE=0><param NAME=NOLABELS VALUE=0><param NAME=CONTROLS VALUE=controlpanel><param NAME=CONSOLE VALUE=_master><param NAME=LOOP VALUE=0><param NAME=NUMLOOP VALUE=0><param NAME=CENTER VALUE=0><param NAME=MAINTAINASPECT VALUE=0><param NAME=BACKGROUNDCOLOR VALUE="#000000"><param NAME=SRC VALUE=""+furl+""></object>";
    }
    return imgstr;
}
 
//返回
function etmediaViewFile(furl,width,height,toplay,playmod){
    var imgstr="";
    var autostart;
    var mediatypes=",.wmv,.asf,.wma,.mp3,.asx,.mid,.midi,";
    var realtypes=",.rm,.ra,.rmvb,.mp4,.mov,.avi,.wav,.ram,.mpg,.mpeg,";
    var html5types=",.mp4,.ogg,.webm,";
    var html5audiotypes=",.mp3,.ogg,.wav,";
    var filetype;
    if(furl=='')
    {
        return '';
    }
    autostart="true";
    if(playmod==1)
    {
        autostart="false";
    }
    if(toplay==0)
    {
        filetype=etmediaToGetFiletype(furl);
        if(filetype=='.flv')
        {
            toplay=3;
        }
        else if(html5types.indexOf(','+filetype+',')!=-1)
        {
            toplay=5;
        }
        else if(html5audiotypes.indexOf(','+filetype+',')!=-1)
        {
            toplay=6;
        }
        else if(filetype=='.swf')
        {
            toplay=4;
        }
        else if(mediatypes.indexOf(','+filetype+',')!=-1)
        {
            toplay=1;
        }
        else
        {
            toplay=2;
        }
    }
    imgstr=etmediaViewFileCode(toplay,width,height,autostart,furl);
    return imgstr;
}
 
function etmediaToGetFiletype(sfile){
    var filetype,s;
    s=sfile.lastIndexOf(".");
    filetype=sfile.substring(s+1).toLowerCase();
    return '.'+filetype;
}
 
 
function EHEcmsEditorDoTranMedia(str){
    CKEDITOR.dialog.getCurrent().getContentElement('etmediainfo1','etmediaurl').setValue(str);
    CKEDITOR.dialog.getCurrent().selectPage('etmediainfo1');
}

 

4、清除浏览器缓存后即可。

本文地址:https://xzo.com.cn/develop/empire/130.html

有帮助,很赞!

信息来源:精准像素
导出教程 下载word版教程
发表评论 共有条评论
关于帝国CMS


帝国cms是一款功能极为强大的cms程序,性能强悍、安全性高,可轻松支持10万数据,高级开发人员可制作出能容纳千万数据量的网站,是国内最出色的开源cms程序之一,推荐企业用户使用

当前最新版本为7.5,8.0版本即将上线,新版本的核心优化点在于多终端的适配。

推荐帝国CMS开发教程
帝国CMS7.5默认伪静态规则大全(.htacces+nginx+web.config)
帝国CMS7.5默认伪静态规则大全(.htacces+nginx+web.config)

帝国CMS7.5默认伪静态规则大全(.htacces+nginx+web.config)提供了多种服务器...

1 527
帝国cms备份的数据存储在哪个文件夹?
帝国cms备份的数据存储在哪个文件夹?

有些时候,我们需要备份数据并取出来,此时从哪里去取呢?帝国cms备份的数据存储...

1 858
帝国cms面包屑导航[!–newsnav–]修改方式大合集
帝国cms面包屑导航[!–newsnav–]修改方式大合集

本文介绍的帝国cms面包屑导航newsnav修改为newsnav完整的修改攻略,包括标签...

11 2193
帝国cms怎样判断当前页面为首页?
帝国cms怎样判断当前页面为首页?

在帝国cms开发时,我们经常要给栏目配置高亮效果。栏目高亮判断循环的id等于...

0 635
帝国cms生成效率低速度很慢怎么办?
帝国cms生成效率低速度很慢怎么办?

今天有客户联系鸥哥,说网上买的帝国cms模板生成效率很低。网站数据只有5万条...

22 2675
帝国cms怎样判断文章有没有缩略图?
帝国cms怎样判断文章有没有缩略图?

在帝国cms二次开发过程中,我们有时会需要判断一条信息有没有缩略图(标题图)。...

0 392
帝国cms把自己ip禁止访问了怎么办?
帝国cms把自己ip禁止访问了怎么办?

帝国cms有禁止ip访问的功能,但如果不小心禁止了自己的ip,或是操作失误导致所...

0 708
帝国cms 使用download.js下载视频文件
帝国cms 使用download.js下载视频文件

视频文件默认会被pc浏览器直接打开,此时download属性也同样无效。那么,要怎样...

0 481
推荐插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1285
帝国cms百度AI黑白图像上色api接口对接插件
帝国cms百度AI黑白图像上色api接口对接插件

百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...

0 433
帝国cms访问统计ip地址链接与封禁插件下载
帝国cms访问统计ip地址链接与封禁插件下载

下载鸥开发了这款帝国cms封禁ip插件,自动记录访问情况,让我们可以更快的识别...

0 1017
帝国cms联想词搜索高级搜索插件下载
帝国cms联想词搜索高级搜索插件下载

帝国CMS自带的搜索功能虽然强大,但也有很强的局限性 -- 必须关键词完全匹配...

0 736
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

0 565
帝国cms百度AI图像清晰度增强api接口对接插件
帝国cms百度AI图像清晰度增强api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...

0 524
帝国cms自动给正文关键词添加tag内链
帝国cms自动给正文关键词添加tag内链

帝国cms有自带的给关键词添加内链功能,但需要手动添加关键词,容易出现疏漏和...

0 841
帝国cms百度AI图像去雾api接口对接插件
帝国cms百度AI图像去雾api接口对接插件

通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...

0 460
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入