百度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的標簽上添加以下內容就可以:

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

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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM