Kindeditor修改video标签播放MP4

前言

在为ECMS更换了kindeditor-4.1.11编辑器后，在插入视频时默认是mebed标签，修改完之后，插入视频时如果是MP4格式则自动转为video标签！
由于是识别判断的，其实本质上只是改动了mebed标签！
知识有限，代码不太规范，当变换成video标签之后，并没有</video>结束，不过可以正常使用！

一、上传限制

打开php/upload_json.php，将：

'media' => array('swf', 'flv',

改为：

'media' => array('swf', 'flv','mp4',

再将：

$max_size = 1000000;

改为：

$max_size = 1000000000;

二、文件写入

在kindeditor-4.1.11目录下新建attached目录，并赋予写入权限，可通过FTP软件设置！

三、增加标签

接下来就是大改造了，打开kindeditor-4.1.11/kindeditor-all.js（点此下载修改后的完整文件），将：

1、查找

_SINGLE_TAG_MAP = 

在后段加入video：

embed,video'),

2、将

'flash', 'media',

改成

'flash','video', 'media',

3、在

embed : ['id', 'class', 

的下方增加：

video : ['src','controls','width','height'],

4、在

if (/\.(rm|rmvb)(\?|$)/i.test(src)) {
return 'audio/x-pn-realaudio-plugin';
}

的下方增加：

if (/\.(mp3)(\?|$)/i.test(src)) {
return 'audio/mpeg';
}
if (/\.(mp4)(\?|$)/i.test(src)) {
return '"video/mp4';
}

5、在

if (/flash/i.test(type)) {
return 'ke-flash';
}

的下方增加：

if (/audio|mp4/i.test(type)) {
return 'ke-video';
}

6、在

function _mediaEmbed(attrs) {

的上方增加：

function _videoEmbed(attrs) {
var html = '<video controls="controls"  ';
_each(attrs, function(key, val) {
html += key + '="' + val + '" ';
});
html += '/>';
return html;
}

7、在

if (/\D/.test(width)) {  

的上方增加：

if(type=="audio/mpeg" || type=="video/mp4"){
srcTag = _videoEmbed(attrs);
}else{
srcTag = _mediaEmbed(attrs);
}

8、在

createlink : function(url, type) {

的上方增加：

insertvideo : function(url, width, height) {
var html = '<video src="' + _escape(url) + '" data-ke-src="' + _escape(url) + '" ';
if (width) {
html += 'width="' + _escape(width) + '" ';
}
if (height) {
html += 'height="' + _escape(height) + '" ';
}
html += '/>';
return this.inserthtml(html);
},

9、在

'img.ke-anchor {',

的上方增加：

'img.ke-video {',
'border:1px solid #AAA;',
'background-image:url(' + themesPath + 'common/media.gif);',
'background-position:center center;',
'background-repeat:no-repeat;',
'width:100px;',
'height:100px;',
'}',

10、在

self.plugin.getSelectedFlash = function() {  

的上方增加：

self.plugin.getSelectedVideo = function() {
return _getImageFromRange(self.edit.cmd.range, function(img) {
return img[0].className == 'ke-video';
});
};

11、将

_each('link,image,flash,media,anchor

改成：

_each('link,image,flash,media,anchor,video

12、在

.replace(/<img[^>]*class="?ke-anchor

的上方增加：

.replace(/<img[^>]*class="?ke-video"?[^>]*>/ig, function(full) {
var imgAttrs = _getAttrList(full);
var styles = _getCssList(imgAttrs.style || '');
var attrs = _mediaAttrs(imgAttrs['data-ke-tag']);
var width = _undef(styles.width, '');
var height = _undef(styles.height, '');
if (/px/i.test(width)) {
width = _removeUnit(width);}
if (/px/i.test(height)) {
height = _removeUnit(height);}
attrs.width = _undef(imgAttrs.width, width);
attrs.height = _undef(imgAttrs.height, height);
return _videoEmbed(attrs);})

13、在

.replace(/<a[^>]*name="(

的上方增加：

.replace(/<video[^>]*[^>]*>(?:<\/video>)?/ig, function(full) {
var attrs = _getAttrList(full);
attrs.src = _undef(attrs.src, '');
attrs.width = _undef(attrs.width, 0);
attrs.height = _undef(attrs.height, 0);
return _mediaImg(self.themesPath + 'common/blank.gif', attrs);})

四、更新缓存

要确认已更新缓存才能出效果！