PHPCMS V9编辑器中新增上传mp4视频(上传视频并插入HTML5的video标签)的功能

2019-10-30 浏览:951
PHPCMS V9编辑器中新增上传mp4视频(上传视频并插入HTML5的video标签)的功能
评论:(2)复制地址

由于PHPCMS v9默认的编辑器中上传的视频插入的是embed标签使用的是flash播放器,手机端无法播放,所以来改造下,让其上传视频并插入HTML5的video标签,这样电脑端的主流浏览器和手机端能都播放,当然也可以参考本文修改进而支持ckplayer、cuplayer等播放器。


修改步骤(为防止与其它按钮混淆和去除无用插件,这里去除了原编辑器中插入flash和视频的按钮):

一、打开statics/js/ckeditor/config.js文件第16行,修改成如下代码:


config.extraPlugins = 'capture,video';


二、复制statics/js/ckeditor/plugins/目录下的flashplayer目录并修改目录名称为video,然后删除video目录下的player目录。


三、修改statics/js/ckeditor/plugins/video/目录下的plugin.js文件为如下代码:


CKEDITOR.plugins.add('video', {

    init: function(editor) {

        //plugin code goes here

        var pluginName = 'video';

        CKEDITOR.dialog.add('video',  function(a) {

            var b = a.config;

            var  escape  =   function(value) {        

                return  value;    

            };    

            return  {        

                title:   '插入MP4视频',

                        resizable:  CKEDITOR.DIALOG_RESIZE_BOTH,

                        minWidth: 350,

                minHeight: 200,

                        contents:  [{          

                    id: 'info',

                    label: '常规',

                    accessKey: 'P',

                    elements: [{

                        type: 'hbox',

                        widths: ['80%', '20%'],

                        children: [{

                            id: 'src',

                            type: 'text',

                            label: '源文件'

                        }, {

                            type: 'button',

                            id: 'browse',

                            filebrowser: 'info:src',

                            hidden: true,

                            align: 'center',

                            label: '浏览服务器'

                        }]

                    }]

                }, {

                    id: 'Upload',

                    hidden: true,

                    filebrowser: 'uploadButton',

                    label: '上传视频',

                    elements: [{

                        type: 'file',

                        id: 'upload',

                        label: '上传视频',

                        size: 38

                    }, {

                        type: 'fileButton',

                        id: 'uploadButton',

                        label: '上传到服务器上',

                        filebrowser: 'info:src',

                        'for': ['Upload', 'upload'] //'page_id', 'element_id'

                    }]        

                }],

                        onOk:   function() { 

                    mysrc  =  this.getValueOf('info',  'src');         

                    html  =  ''  +  escape(mysrc)  +  '';                               

                    a.insertHtml("<video src=\""  +  html  +  "\" controls=\"controls\">您的浏览器版本过低,请先升级。</video>");        

                },

                        onLoad:   function() {        }    

            };

        });

        editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));

        editor.ui.addButton('video', {

            label: '插入mp4视频',

            command: pluginName,

            icon: this.path + 'icon.png'

        });

    }

});

四、修改phpcms/libs/classes/form.class.php文件第33行为如下代码:


['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['ShowBlocks'],['Image','Capture','video'],['Maximize'],


五、最后清除浏览器缓存就可以了。

20190427144333476.png

评论:(2)复制地址
发布:苗景云 | 分类:IT技术&设计 | Tags:PHPCMS mp4

评论列表:

访客

评论于2020-05-16 17:59:58
为啥我的视频路径src为没有值 - 回复该评论

访客

评论于2020-06-19 11:44:57
改好了 不错 连编辑器都显示不出来了 厉害了 - 回复该评论

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。