百度ueditor富文本編輯器上傳視頻設(shè)置封面和禁止視頻全屏、下載功能
最近在工作中用到了ueditor,這個最開始不是我接入到后臺管理系統(tǒng)的,我半路接手,百度官方給的文檔又寫的很一般,不易理解,所以有很多問題解決的很麻煩。
在使用ueditor過程中,目前遇到的一些問題:
我們公司運營需要用ueditor實現(xiàn)微信公眾號文章的編寫,之前她們是直接把微信公眾號文章復制到ueditor編輯器中,這樣子是可以直接使用的。這樣帶來的一個問題是,
如果文章里有視頻播放的話,視頻的播放源全都是騰訊視頻,我們公司商務反對了這種行為,所以運營提出文章內(nèi)的視頻由本地上傳或者使用第三方無廣告的運營商。
ueditor中提供了直接使用視頻鏈接
但是這種方式設(shè)置的視頻用的是flash方式,問題是現(xiàn)在主流的一些瀏覽器都禁用了flash。結(jié)果在頁面上顯示效果如圖:
所以直接使用第三方url地址是走不通了。于是考慮第二種,本地上傳至服務器。
這種方式視頻在頁面里是通過h5的方式播放的,在web瀏覽器,手機app內(nèi)的webview中也可以正常播放。有一個問題是視頻在頁面內(nèi)顯示時是沒有封面圖的,原來的想法是再上傳一張圖片或者通過代碼截取視頻的第一幀作為封面圖,但是這樣做需要的開發(fā)工期不可估,就才用了一個這種方案,用一張默認圖作為所有通過這種方式上傳的視頻的封面圖。
具體操作如下:
在ueditor.config.js中加入如下代碼
然后在生成video播放器節(jié)點的所有代碼處添加這樣一段代碼
poster的值就是指定的默認視頻封面圖,效果就像這樣
然后視頻就可以在web瀏覽器中正常播放了。但是在webview中,點擊視頻中的全屏和,都會導致APP應用閃退,
這應該是APP的webview做了某些限制,讓APP做檢查是后話,因為這個功能我們已經(jīng)上線了,所以最快的解決辦法是隱藏掉視頻中的全屏和下載按鈕。解決辦法:
刪除原生video的控制條的下載或者全屏按鈕的方法:
在video的標簽上添加以下內(nèi)容就可以:
<video controls controlsList='nofullscreen nodownload noremote footbar' ></video>