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