淘特cms
當前位置:淘特CMS->幫助中心->常見問題
更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽
  • 作者:
  • 日期:2019/1/30 10:19:49
  • 出處:淘特CMS
  • 點擊:

kindeditor是一款不錯的可視化編輯器,不過最近幾年似乎沒在更新,現在h5趨于主流,正好有個業務需要編輯器支持mp4視頻的播放,考慮到現在h5中的video標簽的強大,于是決定將原來系統中的embed標記更改好video。具體操作方法如下:

1、在296行

embed : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],

下面增加以下代碼:

video : ['id', 'class', 'src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess','controls'],

修改后的效果如下圖:

更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽

2、在893-895行代碼段

if (/.(swf|flv)(?|$)/i.test(src)) {

return 'application/x-shockwave-flash';

}

下面增加以下代碼:

if (/.(mp4|mp5)(?|$)/i.test(src)) {

return 'video/mp4';

}

更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽

3、然后修改901-903行代碼

if (/flash/i.test(type)) {

return 'ke-flash';

}

在下面增加

if (/video/i.test(type)) {

return 'ke-video';

}

修改后的效果如下圖:

更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽

4、在917行代碼function _mediaImg(blankPath, attrs) {

在其上面增加代碼:

function _mediaVideo(attrs) {

var html = '

_each(attrs, function(key, val) {

html += key + '="' + val + '" ';

});

html += ' controls="controls" />';

return html;

}

更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽

5、在955行代碼:K.mediaEmbed = _mediaEmbed;的下面

增加代碼 :K.mediaVideo = _mediaVideo;

好了,這樣當我們上傳視頻時,就會使用video標記來引用視頻了。取代以前的embed標簽 。不過,這里還有一個問題,就是上傳視頻后,編輯器中為空白的(其實已經上傳成功,切換到代碼模式也能看到有內容)。使用chrome調試,發現問題在樣式上。經過對比發現問題在這里:

之前使用embed標簽顯示視頻的效果:

更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽

替換后使用video展示視頻的效果:

更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽

所以我們增加樣式即可,找到3528行的代碼:'img.ke-media {',

將其修改為'img.ke-media,img.ke-video {',

這句話的含義就是ke-video樣式與ke-media一樣。好了,文件修改好,清除瀏覽器緩存(也可以按ctr+f5),再次上傳視頻查看效果解決!

更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽
更改kindeditor編輯器,改用支持h5的video標簽替換原有embed標簽
最新評論
用 戶:
內 容:
驗證碼:
伦敦奥运会网球比分