pbootcms后臺編輯器添加內容(rong)時(shi)有時(shi)需要添加個(ge)視(shi)(shi)頻鏈接mp4格(ge)式的，然后在(zai)插入(ru)視(shi)(shi)頻后發(fa)現(xian)出(chu)來的是swf的代碼，這樣(yang)就導致(zhi)了視(shi)(shi)頻在(zai)前臺無(wu)法播放。

這個問題(ti)首(shou)先需要(yao)了(le)解(jie)到這是百度編輯器UEditor默認的問題(ti)，所以實現(xian)的思(si)路只能去改ueditor相關的js控制(zhi)代(dai)碼來實現(xian)。

實現效果：

添加swf鏈接就實用默(mo)認的效果，生成emeb標簽

添加mp4格式鏈接生成video標簽(qian)

修改步驟

1、修改video.js實現預覽正確預覽視頻

打開\core\extend\ueditor\dialogs\video\video.js，找到(dao)第(di)275行(xing)

$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
'<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="//www.macromedia.com/go/getflashplayer"' +
    ' src="' + conUrl + '"' +
    ' width="' + 420  + '"' +
    ' height="' + 280  + '"' +
    ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
'</embed>';

修改成

if(conUrl.indexOf(".swf") >= 0 ) {
    $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
    '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="//www.macromedia.com/go/getflashplayer"' +
        ' src="' + conUrl + '"' +
        ' width="' + 420  + '"' +
        ' height="' + 280  + '"' +
        ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' +
    '</embed>';
} else {
    $G("preview").innerHTML = '<div class="previewMsg" style="display:none;"><span>'+lang.urlError+'</span></div>'+
    '<video controls="controls" autoplay="autoplay" '+
        ' width="' + 420  + '"' +
        ' height="' + 280  + '"' +
        ' style="max-width:100%;">' +
        ' <source src="' + conUrl + '"' + ' type="video/mp4" />' +
    '</video>';
}

截圖：

2、修改ueditor.all.min.js實現當填入的是mp4鏈接時生成的html代碼為video標簽

打開\core\extend\ueditor\ueditor.all.min.js

搜索以下代碼

case"embed":i='<embed type="application/x-shockwave-flash" class="'+g+'" pluginspage="//www.macromedia.com/go/getflashplayer" src="'+utils.html(a)+'" width="'+b+'" height="'+d+'"'+(f?' style="float:'+f+'"':"")+' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';break;

然后替換成

case"embed":if(a.indexOf(".swf")>=0){i='<embed type="application/x-shockwave-flash" class="'+g+'" pluginspage="//www.macromedia.com/go/getflashplayer" src="'+utils.html(a)+'" width="'+b+'" height="'+d+'"'+(f?' style="float:'+f+'"':"")+' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >'}else{var j=a.substr(a.lastIndexOf(".")+1);"ogv"==j&&(j="ogg"),i="<video"+(e?' id="'+e+'"':"")+' class="'+g+' video-js" '+(f?' style="float:'+f+'"':"")+' controls preload="auto" width="'+b+'" height="'+d+'" src="'+a+'" data-setup="{}"><source src="'+a+'" type="video/'+j+'" /></video>';};break;

3、上面兩個步驟操作后保存，然后到后臺強制刷新頁面（快捷按鈕ctrl+f5），然后就可以和上面gif動畫一樣的操作效果了。

如果還(huan)沒效果換(huan)個瀏(liu)覽器測(ce)試，避免緩存導致無法(fa)看效果