轉載地址 https://www.sunjs.com/article/detail/0236b555894e42f2b30f17193021ad76.html

ueditor的插入視訊有很多問題，首先插入mp4顯示位址列錯誤等資訊，其次沒有封面poster，回顯也有問題，下邊我來挨個解答一下，另外點選封面也能播放

本人這個部落格後臺使用的是百度的ueditor富文字編輯器，但是在上傳視訊的視訊遇到不少問題，下邊來挨個弄一下。

首先修改ueditor.all.js檔案

ueditor.all.js，17769行

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'image'));修改為

html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, 'video'));

7343,7344,7346行，註釋掉下邊這三行程式碼：

var root = UE.htmlparser(html);

me.filterInputRule(root);

html = root.toHtml();

清理快取，重新整理頁面插入視訊即可

封面的新增辦法：

   我是預先儲存到伺服器一張黑色的播放按鈕照片

其次修改ueditor.config.js檔案，我的是429行，找到如下這句話

video:  ['autoplay', 'controls', 'loop', 'preload','poster','onclick', 

我自定義增加了poster 和 onclick  (poster:封面， onlick:寫了一個小小的js，來控制封面播放)

修改ueditor.all.js 我的是17664行，找到下邊這句話

       case'video':

               var ext = url.substr(url.lastIndexOf('.') + 1);

               if(ext == 'ogv') ext = 'ogg';

               str = '<video'< span="">+ (id ? ' id="'

' controls preload="preload" width="' + width + '" height="' + height + '" onclick="this.play();" poster="https://sunjs.oss-cn-beijing.aliyuncs.com/daigou/201803/14/1520998764600.png" src="' + url + '" data-setup="{}">' +

'<source src="'<span class=" s2"="">+ url + '" type="video/' + ext + '"/>';

               break;

上邊的 poster 和 onclick 是我自己新增的。

好了，去快取重新整理一下瀏覽器。再插入視訊的時候，就會自定義增加黑色封面和點選封面進行播放的功能了