参考文章:https://blog.csdn.net/zhjx922/article/details/7601660
KindEditor本身支持音视频文件的上传,但是对于这些文件的支持是依赖于浏览器控件的,兼容性很差,而且现在比较常见的视频文件MP4也不支持,因此本文提供了对KindEditor进行修改的办法,使其在添加视频后可直接使用CKplayer进行播放。
CKplayer下载地址:http://www.ckplayer.com/down/
我这里使用的是2018-12-20的X1版本
使用简单调用方式:http://www.ckplayer.com/manualX/14.html
KindEditor我为了省事,我这里使用的是kindeditor.all.js直接进行修改,其他文件大同小异。
首先找到K.options,在embed数组中增加下面两项
'flashvars', 'allowfullscreen'
然后修改函数 function _mediaType(src)
// 把
if (/.(swf|flv)(\?|$)/i.test(src)) {
// 改成
if (/.(swf|flv|mp4)(\?|$)/i.test(src)) {
找到函数 function _mediaEmbed(attrs) 为html中的<embed标签添加两个属性
allowscriptaccess="always" allowfullscreen="true"
找到 KindEditor.plugin(‘media’ 修改音视频插件生成HTML的方法
// 将原有的HTML生成代码进行修改
var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src : url,
type : K.mediaType('.swf'),
width : width,
height : height,
quality : 'high'
});
// 改为
var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
src : '/resource/ckplayer/ckplayer.swf', // 这里替换成你的ckplayer.swf的实际位置
flashvars : 'video=' + url.replace(/^video=/, ''),
type : K.mediaType('.swf'),
width : width,
height : height,
quality : 'high'
});
还需要将media插件代码的后半段中对视频属性修改的部分进行处理
// 找到
urlBox.val(attrs.src);
// 替换为
urlBox.val(attrs.flashvars);
最后只要在创建KindEditor实例时在items中添加’media’就可以了。