讓KindEditor支援MP4視訊（使用ckplayer播放器）

摘要： 參考文章：https://blog.csdn.net/zhjx922/article/details/7601660 KindEditor本身支援音視訊檔案的上傳，但是對於這些檔案的支援是依賴於瀏覽器控制元件的，相容性很差，而且現在比較常見的視訊檔案MP4也不支援，因此本文...

參考文章：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’就可以了。

Read: 0