asp.net mvc5 使用百度ueditor 本編輯器完整示例(下)配置上傳播放視頻


通過 asp.net mvc5 使用百度ueditor 本編輯器完整示例(上)介紹,可以上傳圖片到服務器了,也可以上傳小的視頻文件,並且由百度編輯器自動加入html5<video>標簽播放視頻。

但是,遇到大文件上傳,會點不動,會無法上傳。

一、修改百度編輯器的ueditor/net 文件夾下config.json 。修改上傳視頻 最大值512M ,上傳文件配置:1024M;

/* 上傳視頻配置 */
"videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */
"videoFieldName": "upfile", /* 提交的視頻表單名稱 */
"videoPathFormat": "upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
"videoUrlPrefix": "/Content/ueditor/net/", /* 視頻訪問路徑前綴 */
"videoMaxSize": 512000000, /* 上傳大小限制,單位B,默認100MB 已修改成了512M*/
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上傳視頻格式顯示 */

/* 上傳文件配置 */
"fileActionName": "uploadfile", /* controller里,執行上傳視頻的action名稱 */
"fileFieldName": "upfile", /* 提交的文件表單名稱 */
"filePathFormat": "upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
"fileUrlPrefix": "/Content/ueditor/net/", /* 文件訪問路徑前綴 */
"fileMaxSize": 102400000, /* 上傳大小限制,單位B,默認50MB 已修改成了1024M */
"fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上傳文件格式顯示 */

 

二、在項目的根文件下的web.config配置,1、在<system.web>節點下加入 <httpRuntime  maxReuqetLength(最大請求值)  和executionTimeOut(最長超時值)。在<system.webServer>節點下加入<security> <requestFilterling><requestLimits maxAllowedContentLenth(最大允許的內容長度) 值。

<system.web>
<authentication mode="None"/>
<compilation debug="true" targetFramework="4.5"/>
<httpRuntime targetFramework="4.5" maxRequestLength="500000000" executionTimeout="300"/>
</system.web>

 

<system.webServer>
<modules>
<remove name="FormsAuthentication"/>
</modules>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="500000000"></requestLimits>
</requestFiltering>
</security>
</system.webServer>

注意:雖然設置加大了請求的最大長度和超時時間。但如果上傳特別大的文件,會導致內存用完 ,引發 內存溢出異常。本人通過ueditor上傳500M以上的文件,將會引發內存溢出異常。

三、現在可以上傳200-300M左右的文件了,但是許多MP4視頻 無法觀看。

Ueditor默認使用video-js插件播放。

1、可以先在項目 App_Start中的BundleConfig.cs中加入對video-js.css或video-js.min.css文件的綁定,這個操作可以設置播放器的外觀。


bundles.Add(new StyleBundle("~/Content/backgroundcss").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/ueditor/third-party/video-js/video-js.css" ));

2、在播放頁面底部的Scripts節加入以下代碼:

@section Scripts{
@Scripts.Render("~/Content/ueditor/third-party/video-js/video.js")
@Scripts.Render("~/Content/ueditor/third-party/video-js/html5shiv.min.js")  //對不支持html5的瀏覽器提供支持,這里是<video>標簽。
@* @Scripts.Render("~/Content/ueditor/ueditor.parse.js")*@   //本來這個js是用來激活以上 video-js和vido-js.css的,也就是說只用這個,就不用引入video.js和video-js.css,結果ueditor1.4.3版本好像有點問題,不能使用。

<script type="text/javascript">
videojs.options.flash.swf = "/Content/ueditor/third-party/video-js/video-js.swf";    //~這個符號表示網站根目錄 只在c#語言中有限,對javascript他不認識,所有此處不能使用~表示為根目錄。如果使用,會被解析成相對路徑,也就是http://website/list/~/Content/ueditor/third-party/video-js/video-js.swf", 而此路徑下根本不存在這個flash文件。
</script>


}

四、從網上下載的是別人的mp4,ogg文件能播放,但是自己用格式工廠軟件轉換成MP4的文件,通過此設置谷歌瀏覽器F12控制台還是會顯示[Video ERROR]錯誤,甚至使用格式工廠轉換成AVCH264編碼的mp4文件還是無法播放。

真的找不出原因。 在網上看了很多資料后,決心將視頻文件全部轉換成Webm文件。

五、能過ueditor上傳視頻webm格式的文件,居然播放正常。

可以使用狸窩視頻轉換軟件或Free WebM Video Converter 軟件將其它格式的文件轉換為html5的webm文件。

還有,要將下載的ueditor文件夾下的ueditor\third-party\video-js\font 中font文件夾拷到Content文件的目錄下,不然,會出現 視頻開始播放的時候 播放按鈕是黑色,看不清楚的問題。

默認從本地上傳使用html<video>標簽,使用video-js播放,並設置了video的一些樣式。插入方式 webm、flv都能直接使用。

<video class="edui-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="/Content/ueditor/net/upload/video/20150519/6356767037281114251625087.flv" data-setup="{}">
<source src="/Content/ueditor/net/upload/video/20150519/6356767037281114251625087.flv" type="video/flv"/>
</video>

而插入默認使用<flash格式播放,使用嵌入式標記。而插入方式嵌入式標記<embed >只能引用優酷等外部網站,但是可以修改成video標簽后也可使用。

<embed type="application/x-shockwave-flash" class="edui-faked-video" pluginspage="http://www.macromedia.com/go/getflashplayer" src="/Content/ueditor/net/upload/video/20150519/6356765977924022498193409.flv" width="420" height="280" wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true"/>

經測試,可以使用以下方式上傳的大容量錄像可以播放,1、直接從本地上傳webm文件和flv文件,2、將視頻上傳到優酷上,然后插入視頻,也可以訪問,但是有廣告。

 

 

 


免責聲明!

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



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