昆明噬撼电子有限公司

幫助中心 2019-12-30 ueditor 百度編輯器

百度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中提供了直接使用視頻鏈接

950433-20190404151321531-1060768738.png

但是這種方式設(shè)置的視頻用的是flash方式,問(wèn)題是現(xiàn)在主流的一些瀏覽器都禁用了flash。結(jié)果在頁(yè)面上顯示效果如圖:

950433-20190404151715369-219380198.png

所以直接使用第三方url地址是走不通了。于是考慮第二種,本地上傳至服務(wù)器。

950433-20190404151903341-1514622370.png

這種方式視頻在頁(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中加入如下代碼

950433-20190404152506274-977976580.png

然后在生成video播放器節(jié)點(diǎn)的所有代碼處添加這樣一段代碼

950433-20190404152625885-1370815041.png

poster的值就是指定的默認(rèn)視頻封面圖,效果就像這樣

 

950433-20190404152731452-1582554962.png

 

 

然后視頻就可以在web瀏覽器中正常播放了。但是在webview中,點(diǎn)擊視頻中的全屏和950433-20190404152917695-112510036.png,都會(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>


下一篇 bt寶塔面板續(xù)期免費(fèi)let’s encrypt證書后,瀏覽器提示有風(fēng)險(xiǎn)怎么辦?

最新案例 查看更多

查看 
临高县| 吉木乃县| 蕉岭县| 阜宁县| 慈溪市| 嵊泗县| 邵东县| 广州市| 福建省| 天门市| 讷河市| 灵川县| 休宁县| 宜君县| 奉贤区| 静海县| 吉水县| 东台市| 从化市| 龙陵县| 白河县| 肇东市| 平原县| 岳池县| 水城县| 轮台县| 时尚| 肇东市| 应城市| 新蔡县| 枝江市| 阳曲县| 平安县| 濮阳县| 新宁县| 邹平县| 昌吉市| 霍州市| 池州市| 牟定县| 教育|