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、将视频上传到优酷上,然后插入视频,也可以访问,但是有广告。
asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)配置上传播放视频的更多相关文章
- asp.net mvc5 使用百度ueditor 本编辑器完整示例(下)
一.百度ueditor 本编辑器 一个最大的优点是快速导入word文档的内容,特别 是导入word文档的图文混排效果. 操作步骤: 1.先打开word文档,Crtl +C复制 ,Ctrl+V粘贴到Ue ...
- asp.net mvc5 使用百度ueditor 本编辑器完整示例(三)在IIS中多个应用程序使用多个ueditor对象
最近做了一个项目,要求同一类型的多个专业应用程序(网站),但是每个应用程序都需要调用各自当中的ueditor. 步骤: 一.在vs2013中设置每个专业的asp.net mvc 应用程序. 1.配置根 ...
- asp.net mvc5 使用百度ueditor 本编辑器完整示例(上)
最近做一个项目,用到了百度ueditor富文本编辑器,功能强大,在线编辑文档,上传图片\视频.附件. MVC 模型的控制器准备: 1.建立模型. 在项目中Model 文件夹中建立 文章 模型,注意如果 ...
- ASP.NET MVC5 中百度ueditor富文本编辑器的使用
随着网站信息发布内容越来越多,越来越重视美观,富文本编辑就是不可缺少的了,众多编辑器比较后我选了百度的ueditor富文本编辑器. 百度ueditor富文本编辑器分为两种一种是完全版的ueditor, ...
- [转载] ASP.NET MVC4使用百度UEDITOR编辑器
前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法.编辑器可以到http://ueditor.baidu.com/website/downloa ...
- asp.net mvc4使用百度ueditor编辑器
原文 http://www.cnblogs.com/flykai/p/3285307.html 已测试 相当不错 前言 配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好 ...
- 百度UEditor在线编辑器的配置和图片上传
前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...
- ASP.MVC 项目中使用 UEditor 文本编辑器
1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ued ...
- asp网站中使用百度ueditor教程
1.根据网站类型及编码选择相应的ueditor版本,如我的网站编码为gb2312,则选择ueditor 1.43 asp gbk版.2.本机IE浏览器应为8.0或以上,8.0以下的ueditor 1. ...
随机推荐
- hdu 4460spfa用map来实现
#include<stdio.h> #include<string.h> #include <iostream> #include <algorithm& ...
- 洛谷 P4720 【模板】扩展 / 卢卡斯 模板题
扩展卢卡斯定理 : https://www.luogu.org/problemnew/show/P4720 卢卡斯定理:https://www.luogu.org/problemnew/show/P3 ...
- Go---Redis连接池
之前一篇文章介绍过使用redigo连接redis数据库处理,在使用中发现如果初始化一条链接连接redis做相关操作,使用中发现当两个程序交替使用redis时,先前建立的链接会断掉,只能每次操作的时候重 ...
- How can we listen for errors that do not trigger window.onerror?
原文: http://stackoverflow.com/questions/19141195/how-can-we-listen-for-errors-that-do-not-trigger-win ...
- Vs2013在Linux开发中的应用(19): 启动gdb
快乐虾 http://blog.csdn.net/lights_joy/ 欢迎转载,但请保留作者信息 1.1 载入调试引擎 因为我们无法干预VC的调试引擎载入.但能够侦听VC的调试引擎载入事件, ...
- jsoncpp的api简要说明
1 jsoncpp的api简要说明 1,解析(json字符串转为对象) std::string strDataJson; Json::Reader JReader; Json::Value JObj ...
- 开源yYmVc项目,邀您和我一起开发:)
打算在闲暇时间写个MVC框架,要有什么功能一步一步边写边加,仿照struts 2 和 spring mvc.假设您感兴趣的话,能够私密我,给您加入key:). 欢迎您的到来~ 项目放在基于GIT的CS ...
- 【SICP练习】149 练习4.5
练习4-5 原文 Exercise 4.5. Scheme allows an additional syntax for cond clauses, ( => ). If evaluates ...
- 【iOS系列】- iOS吸附效果的实现 之 UICollectionView的使用全解
[iOS系列]- iOS吸附效果的实现 之 UICollectionView的使用全解 UICollectionView可以做很多的布局,在iOS开发中较为重要,所以这里就以实例来讲解UICollec ...
- #include "*.c"文件的妙用
今天我在看代码的时候突然看到在一个.c文件里包括了#include "*.c"代码,这个让我非常诧异,然后google了一下.才发现是这么回事情.以下我写了一个測试代码.我相信你看 ...