mp4视频格式上传:
找到 kindeditor-all.js
- 在 htmlTags 配置中添加:
video : [‘id’, ‘class’, ‘src’, ‘width’, ‘height’, ‘type’, ‘loop’, ‘autostart’, ‘quality’, ‘.width’,
‘.height’, ‘align’, ‘allowscriptaccess’,‘controls’],
这是配置白名单, 为了防止kindeditor编辑器无法识别video标签.
- 修改 _mediaImg()方法
原代码
function _mediaImg(blankPath, attrs) {
var width = attrs.width,
height = attrs.height,
type = attrs.type || _mediaType(attrs.src),
srcTag = _mediaEmbed(attrs),
style = ‘’;
if (/\D/.test(width)) {
style += ‘width:’ + width + ‘;’;
} else if (width > 0) {
style += ‘width:’ + width + ‘px;’;
}
if (/\D/.test(height)) {
style += ‘height:’ + height + ‘;’;
} else if (height > 0) {
style += ‘height:’ + height + ‘px;’;
}
var html = ‘<img class="’ + _mediaClass(type) + ‘" src="’ + blankPath + '" ';
if (style !== ‘’) {
html += ‘style="’ + style + '" ';
}
html += ‘data-ke-tag="’ + escape(srcTag) + ‘" alt="" />’;
return html;
}
修改为,代码块部分为修改的代码
function _mediaImg(blankPath, attrs) {
var width = attrs.width,
height = attrs.height,
type = attrs.type || _mediaType(attrs.src),
srcTag = _mediaEmbed(attrs),
style = ‘’;
if (/\D/.test(width)) {
style += ‘width:’ + width + ‘;’;
} else if (width > 0) {
style += ‘width:’ + width + ‘px;’;
}
if (/\D/.test(height)) {
style += ‘height:’ + height + ‘;’;
} else if (height > 0) {
style += ‘height:’ + height + ‘px;’;
}
if (attrs.src.indexOf(".mp4")!=-1) {
var html = '<video src="'+attrs.src+'" controls="controls" width="'+width+'" height="'+height+'" class="' + _mediaClass(type) + '" type="video/mp4" ';
html += '>您的浏览器太老了, 不支持视频播放。请下载最新浏览器!</video>'
return html;
}else{
var html = '<img class="' + _mediaClass(type) + '" src="' + blankPath + '" ';
if (style !== '') {
html += 'style="' + style + '" ';
}
html += 'data-ke-tag="' + escape(srcTag) + '" alt="" />';
}
return html;
}
attrs.src.indexOf(".mp4")!=-1 如果是mp4格式视频,就将标签替换成标签,这样才能播放
如果修改到这里的话, 会出现编辑器无法编辑, 上传后的视频无法删除.
这里拼接video视频地址的时候, 要加入编辑器识别标签
:
var html = '<p></p><p><video src="'+attrs.src+'" controls="controls" width="'+width+'" height="'+height+'" class="' + _mediaClass(type) + '" type="video/mp4" ';
html += '>您的浏览器太老了, 不支持视频播放。请下载最新浏览器!</video></p><p></p>'