卓越飞翔博客卓越飞翔博客

卓越飞翔 - 您值得收藏的技术分享站
技术文章11201本站已运行3223

帝国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:"视频地址 ",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:"
"+CKEDITOR.tools.htmlEncode(ecmseditorv.lang.common.preview)+ "[点击这里显示预览]
"} ]               }, {id:"Upload",label:ecmseditorv.lang.image.upload,elements:[ {       type: "html",   style: "width:500;height:250",   html: ' ' } ]}, ],               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=""; } else if(toplay==5)//html5video { imgstr=' Your browser is not supported '; } else if(toplay==6)//html5audio { imgstr=' Your browser is not supported '; } else if(toplay==3)//flv { imgstr=""; } else if(toplay==4)//flash { imgstr=""; } else if(toplay==7)//CKPlayer { var uid = get_uid(); var vid = "video-"+uid; var pid = "player-"+uid;   imgstr=`     
    new ckplayer({ container: '#`+pid+`', variable: 'player', poster:'', mobileCkControls:true, mobileAutoFull:false, h5container:'#`+vid+`', video:'`+furl+`'     }); `; } else//reaplayer { imgstr="
"; } 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、去除浏览器内存后即可。

相关专题

卓越飞翔博客
上一篇: 帝国CMS二次开发多值字段PHP调用教程
下一篇: 帝国CMS二次开发PHP跨表查询相关文章
留言与评论(共有 0 条评论)
   
验证码:
隐藏边栏