1. 程式人生 > >百度編輯器上傳視頻音頻的bug

百度編輯器上傳視頻音頻的bug

AR script 文件的 本地 tps 開源 lis 語言 lin

前言:UEditor是由百度web前端研發部開發所見即所得富文本web編輯器,具有輕量,可定制,註重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼,百度Ueditor 支持多種後臺語言上傳使用,php,java,net,nodejs官網沒有提供nodejs 的後臺配置,如果使用koa 框架可以參考這個模塊:https://www.npmjs.com/package/ueditor-koa;上傳圖片,視頻,音頻等基本文件的功能。

百度Ueditor 下載地址:http://ueditor.baidu.com/website/download.html;

本文不介紹ueditor 的具體用法配置,

主要解決問題:視頻和音頻上傳顯示不正確的問題(前端問題,確保後臺正確上傳配置)

第一個問題:上傳視頻不顯示

首先我們來上傳一個視頻,如圖

  技術分享圖片

   發現視頻是成功上傳了,說明後臺已經成功返回數據了,

  點擊確認後,發現視頻並沒有成功插入編輯器中,發現顯示的是一張圖片,並不是視頻

  技術分享圖片

   打開控制器,審查元素看,插入的元素標簽是img ,不是vidoe,

   技術分享圖片

   到這一步,發現問題的所在了,接下來就是要解決問題了

   第一:找到 ueditor.config.js 這個文件,大概在365行這 個 whitList 屬性

  技術分享圖片

   在whitlList 的屬性裏面添加以下代碼

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

   如圖所示

  技術分享圖片

  第二 、找到ueditor.all.js 這文件 ,搜索這個me.commands["insertvideo"] 方法,大概在17780行;找到

 技術分享圖片

 改為: image 改為 video

  技術分享圖片

  源碼:

1  for(var i=0,vi,len = videoObjs.length;i<len;i++){
2     vi = videoObjs[i];
3     cl = (type == upload ? edui-upload-video video-js vjs-default-skin:edui-faked-video);
4     html.push(creatInsertStr( vi.url, vi.width || 420,  vi.height || 280, id + i, null, cl, video));
5 }

  完成到一步,我們重新上傳視頻,這回應該可以正常顯示視頻

  技術分享圖片

    我們點擊html 查看源碼,似乎也正常,

  技術分享圖片

  但是,再點擊顯示回來,發現視頻又變圖片了,但是圖片也不顯示(占位)

   技術分享圖片

   發現bug,繼續修改

  第三:在ueditor.all.js 這文件找到 me.commands["insertvideo"] 方法,大概在17780行;找到:註悉以下代碼;如圖所示

  技術分享圖片

  這樣基本解決視頻上傳的問題了。

  個人還有建議修改:

  在ueditor.all.js 這文件,找到UE.plugins[‘video‘] 這個方法,大概在17632行。

  將 去掉:type="application/x-shockwave-flash" class=" + classname + "pluginspage="http://www.macromedia.com/go/getflashplayer"‘

  技術分享圖片

  至此,視頻的問題ok

第二個問題:上傳本地音頻和上傳音頻不顯示

  主要修改支持本地上傳mp3 音頻問題

  非常簡單,本地上傳音頻也是 在上傳視頻面板那裏上傳,所以只需判斷文件類型就可以了

  ueditor.all.js 這文件 找到 UE.plugins[‘video‘] 這個方法,大概在17632行。

  將原來的:

  技術分享圖片

  改為:

  技術分享圖片

  源碼:

 1  case video:
 2       var ext = url.substr(url.lastIndexOf(.) + 1);
 3       if (ext == ogv) ext = ogg;
 4       if (ext == "mp3") {
 5            str = <audio + (id ?  id=" + id + " : ‘‘) +  class=" audio-js"  + (align ?  style="float: + align + " : ‘‘) + controls preload="none" width=" + width + " height=" + height + " src=" + url + ">" /></audio>;
 6       } else {
 7              str = <video + (id ?  id=" + id + " : ‘‘) + (align ?  style="float: + align + " : ‘‘) + controls width=" + width + " height=" + height + " src=" + url + " data-setup="{}"> + <source src=" + url + " type="video/ + ext + " /></video>;
 8      }
 9      break;

  到這裏修改ok ,上傳一個mp3 文件:

  技術分享圖片

  至此,音頻的本地上傳也解決了,

  但是發現,內置的在線音頻插入的音頻地址都是報錯的,不知道為什麽了。有哪位大神能解決這問題,希望留言,跪謝

完結。。。。謝謝

百度編輯器上傳視頻音頻的bug