百度編輯器插入視頻 實現可實時預覽以及支持手機查看


由於客戶要求要做到能夠拿取第三方視頻,並且可以在手機上實現播放!

我在使用百度編輯器的時候,本地是可以實現上傳以及預覽的效果!

但是第三方視頻,可以上傳。但是無法在手機上預覽。說不支持插件!因為我拿到的是第三方的falsh地址。手機上不支持所以觀看不了!

在插入視頻里放入地址后,正常顯示在插入視頻里,這個時候是正常

但插入后會顯示下圖,視頻沒有正常的預覽,這是因為設置插入編輯器里的不是視頻的代碼,而是image圖片的代碼

這個時候如果進入源碼看的話,會發現里面是空的,根本什么都沒有

 

 在進入編輯器的預覽會發現之前的圖片都消失了

 

 

出現這種情況是由於編輯器沒有開放視頻插入的代碼的白名單,所以會被過xss濾掉

 

解決方案:

首先在ueditor.config.js文件里增加xss過濾白名單:

 

source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play',  
      +  'autoplay','loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']

 

另外由於插入的代碼不是視頻,那么首先要找到插入編輯器代碼的代碼,位置在ueditor.all.js里,如果引用的是uedior.min.js就需要在這里找,找到以下代碼:

注釋掉的那段代碼是因為,如果不注釋掉你點擊確定之后。視頻窗口無法關閉!

原因是:

因為改動embed后,下面紅框的代碼無法正常找到image標簽及其里面的屬性導致的,這里只要注釋紅框的內容就可以解決插入視頻框無法自動關閉的問題。

 

接下來還需要更改一下內容

type規定了flash格式,我插入的是flash所以沒問題,pluginspage是提供用戶flash下載地址的(有些用戶沒有安裝flash插件或者沒有及時更新),那么問題是在class里了,因為ediu-faked-video會告訴編輯器這不是一個視頻,因此會刪除embed里的src的鏈接,因此回到編輯器預覽會出現白板。

 

網上其他的答案是把ediu-faked-video改成ediu-video,但我不建議,因為只能解決部分問題而已,還有其他的bug,例如如果上傳的視頻是mp4格式怎么辦,另外改動的地方不止樣一處,還是有問題,因此我建議改動ueditor.all.js里的下圖紅框部分:

 

這里是判斷如果點擊視頻上傳需要導入的是embed代碼的情況,之前是image,我們改成了embed,因此這里switch得到的是embed的代碼模板,在這里我們去掉

 

 

接下來就是想要在手機上顯示的效果了!

*******************************華麗分割線*********************************

好,接下來解決視頻無法在手機上顯示的問題---嗚嗚嗚~~~(此處應有哭聲,掩面而泣啊,這破事兒弄了我一天)

首先要說的是,視頻網站那邊提供的 iframe 的代碼才能支持在手機上查看,然而,ueditor預覽使用的是embed,最終顯示是用iframe。視頻輸入的地方只能輸入一個網址,但是ueditor在video.js中對各大視頻網站的一些網址做了轉換,我輸入了騰訊提供的iframe中的src中的網址,被video.js中convert_url方法轉換成了另外一個地址,於是最終顯示就顯示不出來了。本着不能讓非開發人員接觸代碼的精神(哪里來的?直接用百度編輯器的source把src替換掉也可以),我改了video.js中的代碼,把預覽的 embed 換成了iframe,把convert_url的功能屏蔽即可。

url: convert_url(url),

改為

url: url,

然后

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

改為

$G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+
'<iframe class="previewVideo" frameborder="0"' +
    ' src="' + url + '"' +
    ' width="' + 420  + '"' +
    ' height="' + 280  + '"' +
    ' allowfullscreen>' +
'</iframe>';

就可以了。

以后只要輸入視頻網站提供的 iframe代碼中的src中的地址即可。

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM