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")*@
<script type="text/javascript">
videojs.options.flash.swf = "~/Content/ueditor/third-party/video-js/video-js.swf"; //此目的是为了
</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文件的目录下,不然,会出现 视频开始播放的时候 播放按钮是黑色,看不清楚的问题。

时间: 2024-08-12 17:12:05

asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)配置上传播放视频的相关文章

asp.net mvc5 使用百度ueditor 本编辑器

最近做一个项目,用到了百度ueditor富文本编辑器,功能强大,在线编辑文档,上传图片视频.附件. 1.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新的是1.43版. 2.下载后解压,将文件夹更名为ueditor,则ueditor文件夹里面就是原程序. 3.将此ueditor文件夹复制到自己MVC项目的Content文件中. 4.在项目中Model 文件夹中建立 文章 模型,注意如果要

ASP.NET MVC5 中百度ueditor富文本编辑器的使用

随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor,另一种是ueditor的迷你版umeditor. 一.我们先讲完全版的ueditor. 1.建立数据模型. 2.建立对应的控制器和视图. 3.访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面,下载.net UTF-8版本,现在最新

ASP.MVC 项目中使用 UEditor 文本编辑器

1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ueditorcss = new StyleBundle("~/assets/plugins/ueditor/themes/default/css"); ScriptBundle ueditorjquery = new ScriptBundle("~/assets/plugins/ue

java开发:分享一下百度ueditor和七牛的图片集成上传

做网站时,如果上传的图片量很大,现在不少人会选用七牛图片服务器.那么,今天就来说说如何把网站的图片上传与七牛的sdk集成的问题. jsp页面,实现图片上传的方式也很多,今天就来说下百度的编辑器:ueditor 首先要到官网去下载它,后面我也会附上源代码,需要的朋友可以下载. 我们新建一个项目:qndemo,然后将ueditor放到webroot目录下,截图如下: 另外,我们还要引入jar包: 前台页面,我们需要引用相关js,默认配置下,会加载出编辑效果,如下图: 这时候,我们上传的图片会保存在本

asp网站中使用百度ueditor教程

1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1.43不支持.3.把ueditor文件夹放于网站根目录下,在网页<head>与</head>间插入以下内容:注意src后的路径根据实际位置修改. <script type="text/javascript" charset="gbk" src

asp网站中使用百度ueditor教程.txt

1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1.43不支持.3.把ueditor文件夹放于网站根目录下,在网页<head>与</head>间插入以下内容:注意src后的路径根据实际位置修改. <script type="text/javascript" charset="gbk" src

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理.     在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下. 1. 先说百度UEditor在Java环境中的使用:1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下 <script type="text/javas

百度UEditor组件出现Parameters: Invalid chunk &amp;#39;&amp;#39; ignored警告的分析

使用百度UEditor在线编辑器组件时,出现Parameters: Invalid chunk '' ignored的警告,之前的项目使用却没有.两个项目的环境应该是一样的. 没有时间去对照两项目使用时究竟环境有什么不同. 直接想办法解决 网上搜寻下这个警告,有具体的说明,如:http://blog.csdn.net/lxy15329/article/details/5958837.后用ie的开发者工具中的http请求捕获.发现有个请求: js/ueditor/jsp/controller.js

学习ASP .NET MVC5官方教程总结(三)添加视图

学习ASP .NET MVC5官方教程总结(三)添加视图 在上一章中我们讲了MVC中的"C",控制器Controllers,这一章我们来讲"V",视图Views的知识. 首先,打开我们的项目,打开我们的HelloWorldController,并修改Index(): <span style="font-size:14px;">public ActionResult Index() { return View(); }</span