本文是針對ueditor視頻上傳后，無法在編輯框中播放的問題進行探討，主要還是對網(wǎng)友所使用的的解決方法的實踐和修改。

問題1 ueditor插入第三方視頻鏈接不顯示，輸入視頻地址有誤

各位可以參考這個博客的文章https://blog.csdn.net/xxf_fighting/article/details/88415723
參考這篇博客，對ueditor/dialogs/video/video.js文件**createPreviewVideo()**方法里，刪除

<embed>

其中的type類型（type=“application/x-shockwave-flash”）

問題2 ueditor插入視頻后無法播放

將ueditor.all.js文件中約17783行代碼( 可以通過搜索creatInsertStr定位)由 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’));

問題3 ueditor插入視頻后再次編輯無法播放

問題2中進行了插入視頻的播放，但是插入視頻，數(shù)據(jù)保存到后臺之后，再次編輯，會發(fā)現(xiàn)文本框中的視頻無法回顯如下圖。因為ueditor源碼這里是兩個不同的代碼控制實現(xiàn)的。所以針對內(nèi)容編輯，視頻回顯，還需要在進行源碼修改。

這種情況兩種解決方法
1.修改ueditor.all.js文件中switchImgAndVideo方法
第二個if語句里三元判斷全部改成video，因為你會發(fā)現(xiàn)出現(xiàn)上圖內(nèi)容，是因為某種原因，ueditor將其渲染為了img，這時我們只能強制將他判斷為video。

function switchImgAndVideo(root,img2video){utils.each(root.getNodesByTagName(img2video ? 'img' : 'embed video'),function(node){var className = node.getAttr('class');if(className && className.indexOf('edui-faked-video') != -1){var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'embed':'image');node.parentNode.replaceChild(UE.uNode.createElement(html),node);}if(className && className.indexOf('edui-upload-video') != -1){var html = creatInsertStr( img2video ? node.getAttr('_url') : node.getAttr('src'),node.getAttr('width'),node.getAttr('height'),null,node.getStyle('float') || '',className,img2video ? 'video':'image');node.parentNode.replaceChild(UE.uNode.createElement(html),node);}})}

2.注釋三行
這也是許多博客里提到的注釋三行辦法，這也可以獲得同方法1的效果
修改ueditor.all.js文件，將下圖紅框中三行代碼注釋掉即可

注意：問題3中 這兩種修改方式，最終都是渲染成video標簽實現(xiàn)視頻播放，
但是這將犧牲掉下方的快捷交互。并且無法刪除視頻標簽。
我們可以通過修改ueditor.all.js文件中，生成video的html字符串代碼，使得視頻可以刪除。
解決方法：修改ueditor.all.js的 creatInsertStr方法，你會發(fā)現(xiàn)，這個方法里有個switch，你只需要修改在這個switch里面的case ‘video’:，在它拼接的字符串末尾加個

<br/>

就行，這樣在編輯器中，視頻就可以直接回檔鍵刪除。

function creatInsertStr(url,width,height,id,align,classname,type){url = utils.unhtmlForUrl(url);align = utils.unhtml(align);classname = utils.unhtml(classname).trim();width = parseInt(width, 10) || 0;height = parseInt(height, 10) || 0;var str;switch (type){case 'image':str = '<img ' + (id ? 'id="' + id+'"' : '') + ' width="'+ width +'" height="' + height + '" _url="'+url+'" class="' + classname.replace(/\bvideo-js\b/, '') + '"' +' src="' + me.options.UEDITOR_HOME_URL+'themes/default/images/spacer.gif" style="background:url('+me.options.UEDITOR_HOME_URL+'themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'+(align ? 'float:' + align + ';': '')+'" />'break;case 'embed':str = '<embed class="' + classname + '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +' src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"' + (align ? ' style="float:' + align + '"': '') +' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';break;case 'video':var ext = url.substr(url.lastIndexOf('.') + 1);if(ext == 'ogv') ext = 'ogg';str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +'<source src="' + url + '" type="video/' + ext + '" /></video><br/>';break;}return str;} 如果不添加的話，視頻只能通過工具欄轉(zhuǎn)為html刪除，但是這樣顯然是不符合邏輯的，因為不熟悉html語言的用戶是不可能這么做的。但是這種修改只是解決了刪除問題，依舊是犧牲了快捷交互，如果想修改視頻框大小、內(nèi)容，只能刪掉重新上傳了，這是目前我找到的最合理的方式。

問題4 ueditor插入視頻或圖片后，回檔鍵刪除再撤銷，視頻或圖片無法回顯

未解決，待更新

寫在最后

值得注意，這些方法都是通過修改ueditor源碼解決的問題，修改源碼可能會造成一些未知的問題。但是網(wǎng)友的方法大多也是修改源碼，具體如何修改就看各位大神了。

總結(jié)

以上是生活随笔為你收集整理的ueditor插入视频无法播放解决方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。