• 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 hird-partyvideo-jsfont 中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、将视频上传到优酷上,然后插入视频,也可以访问,但是有广告。

     

  • 相关阅读:
    七牛上传图片视频demo
    JavaScript数组及相关方法
    Math对象产生随机数一个小应用
    JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
    HTML5 中的meter 标签的样式设置
    jQuery报错:Uncaught ReferenceError: $ is not defined
    每次打开office 2013都提示配置进度,必须得等他下完然后重启,重启完了在打开,还是提示配置进度,怎么解决
    CSS小技巧收藏
    DOM中元素节点、属性节点、文本节点的理解13.3
    (转)如果知道dll文件是面向32位系统还是面向64位系统的?
  • 原文地址:https://www.cnblogs.com/liuyuanhao/p/4515027.html
Copyright © 2020-2023  润新知