你的位置:首页 > 网页设计

[网页设计]ewebeditor下利用ckplayer增加html5 (mp4)全平台的支持


学校数字化平台富文本编辑器一直用的ewebeditor,应该说非常的好,支持常用office文档的直接导入,极大的方便了老师们资料的上传,最近在规划整个数字化校园向全平台改版,框架采用bootstrap构造,信息输入还是采用ewebeditor,对于视频如果要做到全平台最好的格式就是Mp4+html5,而ewebeditor本身不支持,所以把ewebeditor和ckplayer整合下,需要的朋友可以自行拿去。
具体的操作如下,
拷贝ckplaer到ewebeditor的plugin下,修改 js下的zh-cn.js文件,我是把原来的flv播放器,替换成ckplayer播放器,所以找到lang["DlgMediaPluginFLV"]= "CkPlayer 播放插件"  修改如下提示
打开dialog下的media.htm修改对应的flv调用代码,具体如下:
 

 
 1 case "flv": 2     s_Html = '<div id="a1"></div>' 3       +'<scr'+'ipt type="text/javascript" src="http://www.cnblogs.com//ewebeditor/plugin/ckplayer/ckplayer.js" charset="utf-8"></sc'+'ript>\n' 4       +'<scr'+'ipt type="text/javascript">\n' 5       +'var flashvars={\n' 6       +'f:\''+sFromUrl+'\',\n' 7       +'c:0,\n' 8       +'loaded:\'loadedHandler\'\n' 9       +'};\n'10       +'var video=[\''+sFromUrl+'->video/mp4\'];\n'11       +'CKobject.embed(\'/ewebeditor/plugin/ckplayer/ckplayer.swf\',\'a1\',\'ckplayer_a1\',\''+sWidth+'\',\''+sHeight+'\',true,flashvars,video);\n'12       +'</sc'+'ript>';13     break;

 


 

 如果你需要自动识别mp4,可以修改下面的代码
 
 1 switch(s_Ext){ 2       case "flv": 3       case "f4v": 4       case "mp4":   5         sPlugin = "flv"; 6         break; 7       case "asf": 8       case "avi": 9       case "mp3":10       //case "mp4": 删除11       case "wav":12       case "mpg":13       case "mpeg":14       case "mid":15       case "midi":16       case "aif":17       case "aifc":18       case "aiff":19         sPlugin = "mediaplayer6";

 



 
至此,利用ckplayer,ewebeditor添加的视频就可以做到全平台html5 和flash的自动切换了。