kindeditor上传及播放视频的问题

kindeditor是一款传统的编辑器，年代久远，有些新功能不支持。比如上传和播放视频就很容易出问题。

上传：

一是格式，二是大小。这些都好解决，但这次遇到一个隐藏的问题。页面报错：

System.Web.HttpException:“超过了最大请求长度。”

对应报错文件为：
HttpPostedFile imgFile = context.Request.Files["imgFile"];
原因：
asp.net默认Request文件大小为4M，而上传视频远超。
修改：
Web.config文件：
httpRuntime 节点增加 maxRequestLength = "51200"，单位为KB，设置为50M。

播放：

上传成功后页面无法播放视频，显示插件不支持。

原因：
kindeditor编辑器默认为上传的视频文件生成embed标签，而该标签已不受支持。
修改：
让KindEditor使用H5 video标签播放视频。

将kindeditor-all.js文件中的embed替换为video，再增加一些相应的设置，如控制栏，循环和自动播放等。

打开/kindeditor/kindeditor-all.js
首先在Ln304行：
embed: ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess', 'wmode'],
后增加：
video: ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autoplay', 'quality', '.width', '.height', 'align', 'controls', 'muted','controlslist'],
注：这里增加这些属性非常重要，如果不列出的话，保存时后台会自动屏蔽掉。即使在_mediaEmbed函数中重定义了html字符串也不行。

1. 修改 function _mediaType(src)  函数，增加mp4、ogg、webm的类型定义：

if (/.(mp4)(?|$)/i.test(src)) {
    return 'video/mp4';
}
if (/.(ogg)(?|$)/i.test(src)) {
    return 'video/ogg';
}
if (/.(webm)(?|$)/i.test(src)) {
    return 'video/webm';
}

2. 修改 function _mediaEmbed(attrs)  函数，判断如果是mp4格式则使用video标签：

if (attrs.type == "video/mp4") {
    var html = '<video ';
    _each(attrs, function (key, val) {
        html += key + '="' + val + '" ';
    });
    html += ' controls="controls" autoplay="autoplay" muted="muted" controlslist="nodownload" />';
}

注：谷歌会禁止自动播放功能，即使加了autoplay属性也不管用，IE可以。解决办法是增加muted，即设为静音谷歌就允许自动播放了。另外controlslist="nodownload"是为了拿掉控制栏中的“下载”按钮。

js压缩成min.js：

实际中使用的是kindeditor-all-min.js，修改好kindeditor-all.js以后，还需要进行压缩。压缩方法如下：
先下载安装node.js
然后在node.js的npm里安装uglify
npm install uglify-js -g
压缩js文件：
uglifyjs kindeditor-all.js -o kindeditor-all-min.js
或者
uglifyjs kindeditor-all.js -m -o kindeditor-all-min.js  -m参数就是把变量名变成a, b, c, d这样，压缩出来的文件会更小。