百度ueditor富文本編輯器上傳視頻設置封面和禁止視頻全屏、下載功能

最近在工做中用到了ueditor，這個最開始不是我接入到後臺管理系統的，我半路接手，百度官方給的文檔又寫的很通常，不易理解，因此有不少問題解決的很麻煩。

在使用ueditor過程當中，目前遇到的一些問題：

咱們公司運營須要用ueditor實現微信公衆號文章的編寫，以前她們是直接把微信公衆號文章複製到ueditor編輯器中，這樣子是能夠直接使用的。這樣帶來的一個問題是，

若是文章裏有視頻播放的話，視頻的播放源全都是騰訊視頻，咱們公司商務反對了這種行爲，因此運營提出文章內的視頻由本地上傳或者使用第三方無廣告的運營商。

ueditor中提供了直接使用視頻連接

可是這種方式設置的視頻用的是flash方式，問題是如今主流的一些瀏覽器都禁用了flash。結果在頁面上顯示效果如圖：

因此直接使用第三方url地址是走不通了。因而考慮第二種，本地上傳至服務器。

這種方式視頻在頁面裏是經過h5的方式播放的，在web瀏覽器，手機app內的webview中也能夠正常播放。有一個問題是視頻在頁面內顯示時是沒有封面圖的，原來的想法是再上傳一張圖片或者經過代碼截取視頻的第一幀做爲封面圖，可是這樣作須要的開發工期不可估，就才用了一個這種方案，用一張默認圖做爲全部經過這種方式上傳的視頻的封面圖。

具體操做以下：

在ueditor.config.js中加入以下代碼

而後在生成video播放器節點的全部代碼處添加這樣一段代碼

poster的值就是指定的默認視頻封面圖，效果就像這樣

 

 

 

而後視頻就能夠在web瀏覽器中正常播放了。可是在webview中，點擊視頻中的全屏和，都會致使APP應用閃退，

這應該是APP的webview作了某些限制，讓APP作檢查是後話，由於這個功能咱們已經上線了，因此最快的解決辦法是隱藏掉視頻中的全屏和下載按鈕。解決辦法：

刪除原生video的控制條的下載或者全屏按鈕的方法：

在video的標籤上添加如下內容就能夠：

原文地址：https://blog.csdn.net/qq_36120342/article/details/82318873
親測有效。<video controls controlsList='nofullscreen nodownload noremote footbar' ></video>

本文是想到哪寫到哪，沒有邏輯，只是作個記錄。