.net core 加 layui 分片上传视频且转.m3u8带封面

最新推荐文章于 2024-03-09 11:47:40 发布
最新推荐文章于 2024-03-09 11:47:40 发布
阅读量864 收藏 1
点赞数 1
分类专栏： .net 文章标签： .netcore layui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1934215149/article/details/125108592
版权

这篇文章主要针对.net core 加 layui进行分片上传视频，希望可以帮助到各大网友

话不多说，直接上代码

前端代码


@{
    ViewData["Title"] = "上传视频界面";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
}
    <style type="text/css">
        .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: #000;
            opacity: 0.8;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.8;
            z-index: 999;
            display: none;
        }

        .loading {
            position: fixed;
            width: 300px;
            left: 50%;
            margin-left: -150px;
            top: 200px;
            height: 18px;
            border-radius: 10px;
            background: #fff;
            z-index: 9999;
            overflow: hidden;
            display: none;
        }
    </style>
    <body>
        <div class="layui-main">
            <input type="hidden" name="form_submit" value="ok" />
            <div class="layui-form-item">
                <label class="layui-form-label">视频：</label>
                <input type="hidden" id="totalPage" value="0" />
                <input type="hidden" id="page" value="1" />
                <input type="hidden" id="status" value="0" />
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="fileUpload"><i class="layui-icon"></i>上传文件</button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">视频名：</label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" value="" lay-verify="title" autocomplete="off" readonly="true"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="test9">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
        <div class="mask"></div>
        <div class="loading">
            <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="uploadProgress">
                <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
            </div>
        </div>
        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script>
            layui.use(['upload', 'element', 'layer'], function () {
                // var form = layui.form;
                //var upload = layui.upload;
                //var element = layui.element;
                //var $ = layui.$;
                var $ = layui.jquery
                    , upload = layui.upload
                    , element = layui.element
                    , layer = layui.layer;
                upload.render({
                    elem: '#fileUpload',
                    url: '/Video/UploadFiles', //处理上传文件接口
                    accept: 'file',
                    bindAction: '#test9',
                    auto: false,
                    // acceptMime: '*.*',//允许上传的文件类型
                    before: function (obj) {
                        element.progress('uploadProgress', '0%');//进度条清0
                        $('.mask').show();//遮罩层
                        $('.loading').show();//显示进度条
                        var data = this.data;
                        var files = obj.pushFile();//选择的文件推入obj
                        var LENGTH = 500 * 1024; //每片文件大小
                        obj.preview(function (index, file, result) {
                            var totalSize = file.size;//文件总大小
                            var totalPage = Math.ceil(totalSize / LENGTH);//总共上传的片数
                            $('#totalPage').val(totalPage);
                            $('#page').val('1');
                            $('#status').val('1');
                            var fileName = file.name;//获取文件名
                            $('#name').val(fileName);
                            var fileExt = fileName.substr(fileName.lastIndexOf('.') + 1);//获取文件后缀
                            fileName = fileName.substr(0, fileName.lastIndexOf('.'));//获取不带后缀的文件名
                            var progressTimer = setInterval(function () {
                                var totalPage = parseInt($('#totalPage').val());
                                var page = parseInt($('#page').val());
                                var status = $('#status').val();
                                if (parseInt(totalPage) == parseInt(page) && (parseInt(status) == 2 || parseInt(status) == -1)) {
                                    clearInterval(progressTimer);//上传成功或失败停止上传
                                } else {
                                    //状态为1的时候上传
                                    if (status == 1) {
                                        $('#status').val('0');
                                        data.data = file.slice((page - 1) * LENGTH, page * LENGTH);
                                        data.lastModified = file.lastModified;
                                        data.fileName = fileName;
                                        data.page = page;
                                        data.totalPage = totalPage;
                                        data.fileExt = fileExt;
                                        // data.index = index;
                                        var r = ''
                                        for (var i = 1; i < 11; i++) {
                                            r += Math.round(Math.random() * 20)
                                        }
                                        data.SName = r;
                                        if (page >= totalPage - 1) {

                                        }
                                        obj.upload(index, file.slice((page - 1) * LENGTH, page * LENGTH));//从文件中截取进行分片上传
                                    }
                                }
                            }, 100);
                        });
                    },
                    done: function (res) {
                        if (res.status == 1) { //分片上传
                            var page = parseInt($('#page').val());
                            var totalPage = parseInt($('#totalPage').val());
                            element.progress('uploadProgress', Math.ceil(page * 100 / totalPage) + '%');//更新进度条
                            page = page + 1;//上传下一片
                            console.log(page);
                            $('#page').val(page);
                            $('#status').val('1');
                        } else if (res.status == 2) { //上传完成
                            element.progress('uploadProgress', '100%');
                            $('#status').val('2');
                            $('#downUrl').val(res.downUrl);
                            layer.msg('上传成功', { time: 1000, anim: 0 }, function () {
                                $('.mask').hide();//隐藏遮罩层
                                $('.loading').hide();//隐藏进度条
                            });
                        } else { //上传错误
                            $('#status').val('-1');
                            element.progress('uploadProgress', '0%');
                            console.log(!typeof (res.downUrl) == "undefined");
                            if (typeof (res.downUrl) == "undefined") {
                            } else {
                                $('#downUrl').val(res.downUrl);
                            }
                            layer.msg("上传失败，请重试", { time: 3000, anim: 0 }, function () {
                                $('.mask').hide();
                                $('.loading').hide();
                            });
                        }
                    },

                    error: function () {
                        $('.mask').hide();
                        $('.loading').hide();
                    }
                });
            });
        </script>
    </body>

后台代码，如需进行m3u8格式转换需要自行下载ffmpeg.exe，下载之后直接丢入项目根目录就行

 /// <summary>
        /// 上传分片文件
        /// </summary>
        /// <param name="collection"></param>
        /// <returns></returns>
        public async Task<object> UploadFiles([FromForm] IFormCollection collection)
        {
            FormFileCollection filelist = (FormFileCollection)collection.Files;
            var data = filelist["data"]; 
            string lastModified = Request.Form["lastModified"].ToString();
            var total = Request.Form["totalPage"];
            var fileName = Request.Form["fileName"];
            var index = Request.Form["page"];
            var Vname = Request.Form["SName"];
            var fileExt ="."+ Request.Form["fileExt"];
            //$"{Directory.GetCurrentDirectory()}/wwwroot/"
            string temporary = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/", lastModified);//临时保存分块的目录
            try
            {
                if (!Directory.Exists(temporary))
                    Directory.CreateDirectory(temporary);
                string filePath = Path.Combine(temporary, index.ToString());
                if (!Convert.IsDBNull(data))
                {
                    await Task.Run(() => {
                        FileStream fs = new FileStream(filePath, FileMode.Create);
                        data.CopyTo(fs);
                        fs.Close();
                    });
                }
                object mergeOk = false;
                //string Time = DateTime.Now.ToString("yyMMddHHmmss");
                string Time = Vname;
                Dictionary<string, object> result = new Dictionary<string, object>();
                if (total == index)
                {
                    mergeOk = await FileMerge(lastModified, fileExt, Time);
                    result.Add("number", index);
                    result.Add("mergeOk", mergeOk);
                    result.Add("VideoId", Time);
                    result.Add("status", 2);
                }
                else
                {
                    result.Add("number", index);
                    result.Add("mergeOk", mergeOk);
                    result.Add("VideoId", Time);
                    result.Add("status", 1);
                }

                
                if ((bool)mergeOk)
                {
                    // string fileExt = Path.GetExtension(fileName);//获取文件后缀
                    DirectoryInfo di = new DirectoryInfo($"{Directory.GetCurrentDirectory()}/wwwroot/" + Time + "/");
                    if (!di.Exists)
                    {
                        di.Create();
                    }
                    di = new DirectoryInfo(@"C:\Users\Administrator\Desktop\dist\media\" + Time + @"\");
                    if (!di.Exists)
                    {
                        di.Create();
                    }
                    //$"{Directory.GetCurrentDirectory()}/wwwroot/" + Time + "/"
                    Convert2Flv($"{Directory.GetCurrentDirectory()}/wwwroot/" + Time + "/" + Time + "" + fileExt, @"C:\Users\Administrator\Desktop\dist\media\" + Time + @"\");
                    System.IO.File.Delete($"{Directory.GetCurrentDirectory()}/wwwroot/" + Time + "/" + Time + "" + fileExt);//删除文件
                    Directory.Delete($"{Directory.GetCurrentDirectory()}/wwwroot/" + Time);//删除文件夹
                }
                return result;

            }
            catch (Exception ex)
            {
                Directory.Delete(temporary);//删除文件夹
                throw ex;
            }
        }
        /// <summary>
        /// 分片文件进行合并
        /// </summary>
        /// <param name="lastModified"></param>
        /// <param name="fileExts"></param>
        /// <param name="NewfileName"></param>
        /// <returns></returns>
        public async Task<object> FileMerge(string lastModified, string fileExts, string NewfileName)
        {
            string erro = "";
            bool ok = false;
            try
            {
                var temporary = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/", lastModified);//临时文件夹
                //fileName = Request.Form["fileName"];//文件名
                string fileExt = fileExts;//获取文件后缀
                var files = Directory.GetFiles(temporary);//获得下面的所有文件
                DirectoryInfo di = new DirectoryInfo($"{Directory.GetCurrentDirectory()}/wwwroot/" + NewfileName + "/");
                if (!di.Exists)
                {
                    di.Create();
                }
                var finalPath = Path.Combine($"{Directory.GetCurrentDirectory()}/wwwroot/" + NewfileName + "/", NewfileName + fileExt);//最终的文件名（demo中保存的是它上传时候的文件名，实际操作肯定不能这样）
                var fs = new FileStream(finalPath, FileMode.Create);
                foreach (var part in files.OrderBy(x => x.Length).ThenBy(x => x))//排一下序，保证从0-N Write
                {
                    var bytes = System.IO.File.ReadAllBytes(part);
                    await fs.WriteAsync(bytes, 0, bytes.Length);
                    bytes = null;
                    System.IO.File.Delete(part);//删除分块
                }
                fs.Close();
                Directory.Delete(temporary);//删除文件夹
                ok = true;
            }
            catch (Exception ex)
            {
                erro = ex.Message;
            }
            return ok;
        }
        /// <summary>
        /// 转成m3u8格式
        /// </summary>
        /// <param name="vFileName"></param>
        /// <param name="ExportName"></param>
        /// <returns></returns>
        public bool Convert2Flv(string vFileName, string ExportName)
        {
            try
            {
                //vFileName = @"‪C:\file\202203241822557127010848733.mp4";
                //ExportName = @"C:\file\111\";
                string Command = @" -i " + vFileName + " -profile:v baseline -level 3.0 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls " + ExportName + "ylky.m3u8"; //m3u8格式   
                System.Diagnostics.Process p = new System.Diagnostics.Process();
                p.StartInfo.FileName = @"ffmpeg.exe";
                p.StartInfo.Arguments = Command;
                p.StartInfo.WorkingDirectory = $"{Environment.CurrentDirectory}";
                #region cmd执行
                p.StartInfo.CreateNoWindow = true;
                p.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
                p.Start();//启动线程
                p.WaitForExit();//等待完成
                p.Close();//关闭进程
                p.Dispose();//释放资源
                convertVideoImage(vFileName, ExportName);
                #endregion
            }
            catch (System.Exception e)
            {
                throw e;
            }
            return true;
        }
        /// <summary>
        /// 截取视频图片作为封面
        /// </summary>
        /// <param name="VideoPath"></param>
        /// <param name="savaRd"></param>
        /// <returns></returns>
        public string convertVideoImage(string VideoPath = "", string savaRd = "")
        {
            string str_MyProg = $"{Environment.CurrentDirectory}";
            if (string.IsNullOrEmpty(VideoPath))
            {
                return string.Empty;
            }
            string str_CommandArgs = "";
            var file1 = new FileInfo(VideoPath);
            if (file1.Exists)
            {
                try
                {
                    //string save_folder = file1.FullName.Replace(file1.Name, "");
                    string image_file = file1.Name.Replace(file1.Extension, ".jpg");
                    string save_folder = savaRd;
                    //#设置参数以直接输出图像序列(帧)，第3秒
                    str_CommandArgs = "-i " + VideoPath + " -ss 00:00:03 -vframes 1 -an -y  -f mjpeg " + save_folder + image_file;
                    System.Diagnostics.ProcessStartInfo cmd_StartInfo = new System.Diagnostics.ProcessStartInfo();
                    cmd_StartInfo.FileName = @"ffmpeg.exe";
                    cmd_StartInfo.Arguments = str_CommandArgs;
                    cmd_StartInfo.WorkingDirectory = $"{Environment.CurrentDirectory}";
                    cmd_StartInfo.RedirectStandardError = false; //set false
                    cmd_StartInfo.RedirectStandardOutput = false; //set false
                    cmd_StartInfo.UseShellExecute = true; //set true
                    cmd_StartInfo.CreateNoWindow = true;  //don't need the black window
                                                          //创建一个进程，分配它的ProcessStartInfo并启动它
                    System.Diagnostics.Process cmd = new System.Diagnostics.Process();
                    cmd.StartInfo = cmd_StartInfo;
                    cmd.StartInfo.WindowStyle = System.Diagnostics.ProcessWindowStyle.Hidden;
                    cmd.Start();
                    //System.Threading.Thread.Sleep(1000);
                    cmd.WaitForExit();//等待完成
                    cmd.Close();
                    cmd.Dispose();
                    return image_file;
                }
                catch (Exception ee)
                {
                    throw new Exception(ee.StackTrace + ee.Message + " for: " + str_MyProg + " " + str_CommandArgs);
                }
            }
            else
            {
                throw new Exception("No exists file:" + VideoPath);

            }
        }

个人理解，不对的大家可以相互交流。不喜勿喷，谢谢。

.net农村工程师
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ASP.NET 使用FFmpeg实现MP4转换M3U8示例源码
03-06
在ASP.NET框架下，使用FFmpeg工具，实现MP4转换M3U8示例源码
在.net Core中如何使用HTML5上传视频
weixin_30279751的博客
01-18 410
最近刚做了视频上传的功能，有一些心得还有注意事项，这里不贴全部代码，主要是讲述编码思路。本代码基于.net core 、html5示例 完成视频上传的两种思路 1、视频分片上传，比如把整个视频拆分成2兆一片，最后一片上传完再组合成一个视频。这种方式是针对断网、服务器中断连接等中断的情况 具体实现方式： 计算文件需要差分成几片 按1,2,3...排序拆好放到文件夹 最后一...
ASP.NET Core 5.0 + Layui 个人博客网站源码 (带运行文档)
最新发布
03-09 405
6.项目可以选择性使用redis， 默认是没有启用redis（默认使用内置缓存）的和极验验证的，需要启用请先安装redis和注册极验的账号，在appsettings.json文件中更改即可使用（注：极验行为验证免费版只支持滑块验证，还有一些其他限制，个人使用已经足够）5. 在Linux部署注意事项，默认是使用的图形验证码，在Linux上部署需要安装相关依赖不然无法正常显示图形验证码，可自行百度解决，图形绘制已经替换为官方的System.Drawing.Common包。
ASP.NET Core 上传微信永久视频素材
weixin_33874713的博客
05-30 436
话不多说直接上源码 请求实体 public class AddVideoRequest { /// <summary> /// 文件流 /// </summary> public System.IO.Stream stream { get; set; } /// <summary...
.net + html5上传,在.net Core中如何使用HTML5上传视频
weixin_39875754的博客
06-05 307
最近刚做了视频上传的功能，有一些心得还有注意事项，这里不贴全部代码，主要是讲述编码思路。本代码基于.net core 、html5示例完成视频上传的两种思路1、视频分片上传，比如把整个视频拆分成2兆一片，最后一片上传完再组合成一个视频。这种方式是针对断网、服务器中断连接等中断的情况具体实现方式：计算文件需要差分成几片按1,2,3...排序拆好放到文件夹最后一片拆好后合并成一个视频文件最后删除分片的...
.net core使用ffmpeg实现视频转换
03-25
本项目采用.net core+.net standard搭建： 1、支持读取视频信息（格式、fps、width、height等） 2、支持转换为指定视频类型 3、支持webApi调用 4、支持任务调度（job），可设置指定时间运行 5、支持DI（Autofac）
.NET Core MVC+Layui 入库管理后台系统
04-18
使用.net core mvc3.1 +Layui实现的简单的增删改查的业务逻辑，添加上传图片跟导出Excel的功能
.Net Core3.1 + EF Core + LayUI 封装的MVC版后台管理系统.zip
05-02
.Net Core3.1 + EF Core + LayUI 封装的MVC版后台管理系统 .Net Core3.1 + EF Core + LayUI 封装的MVC版后台管理系统 .Net Core3.1 + EF Core + LayUI 封装的MVC版后台管理系统 .Net Core3.1 + EF Core + LayUI ...
.net core api+layui基础框架系统
03-24
基于Layui 设计的 后台管理系统，前后端分离 。 带数据库哦。
asp.net core webapi+layui基础实例程序源码.zip
08-17
asp.net core webapi+layui基础实例程序源码.zip
基于ASP.Net Core和Layui的多文件上传（流方式）
gc_2299的博客
07-23 790
初步接触基于ASP.Net Core和Layui的多文件上传（流方式）
C# .net6.0+FFmpeg对海康摄像机进行m3u8拉流转码
05-25
C# .net6.0+FFmpeg对海康摄像机进行m3u8拉流转码..中间对视频的拉流优化和拉流过程中掉线都有优化处理
ASP.NET Core文件上传与下载实例(多种上传方式)
10-18
下面小编就为大家分享一篇ASP.NET Core文件上传与下载实例(多种上传方式)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Layui图片上、视频、音频、文件上传接口及跨域上传
06-20
Layui图片上、视频、音频、文件上传接口及跨域上传，此项目案例包含了多种上传方式，欢迎大家下载
获取视频封面，本地视频，网络视频都可以用
Scarlett的博客
04-11 3121
/**  *  获取视频封面，本地视频，网络视频都可以用  *  *  @param videoURL video的Url  */ + (void)thumbnailImageForVideo:(NSURL *)videoURL completion:(void(^)(UIImage *image))completion{          dispatc
.NetCore WebUploader 实现大文件分片上传
csdn_aspnet的专栏
06-08 396
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。项目要求通过网站上传大文件，比如视频文件，通过摸索实现了文件分片来上传，然后后台进行合并。采用大文件分片并发上传，极大的提高了文件上传效率。希望以上代码可以对您有所帮助。
.NET(C#) 通过文字和logo图片生成视频封面
weixin_42098295的博客
10-08 231
本文主要介绍.NET(C#)中，使用GDI+(Graphics)绘图的方法，将文字和logo图内容生成视频封面图片的方法，以及相关示例代码。 原文地址：.NET(C#) 通过文字和logo图片生成视频封面
layui.open使用例子播放m3u8视频
zxh7770的博客
05-20 2312
阐述： 最近项目需求，使用弹窗播放m3u8视频，本例子中使用了layui.open弹窗方式。 代码例子如下： 语法 layer.open(options) layer.open 根据type不同，类型也就不一样,有五种类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） 其实工作开发中用的最多的就是1、2这两种类型了，这里就只介绍这两种，其他的可以参考官网例子。 页面层(type:1) ：弹出层展示的是某个定义好的页面元素 layer.open({ ty
如何取视频第一帧作为封面图片上传
qq_40905766的博客
10-13 1047
步骤思路如下： 1.在页面上放一个隐藏不可见的video标签，暂不指定src属性。但是注意，需要设置autoplay属性，否则截取到的视频图片很可能是一张空白图 2.获取视频文件的url，赋值给video标签，同时为了保险起见，最好是再创建一个source标签，将url也赋值给source标签的src属性 3.监听video标签的canplay事件，注意，在canplay事件里，第一件事就是暂停视频播放 4.创建canvas标签，使用canvas的drawImage方法画图 代码如下： <!-- 注意
.net core mvc layui实现个人信息展示
10-23
在.NET Core MVC中使用Layui来实现个人信息展示非常简单。首先，我们需要在项目中安装并引用Layui的相关资源，在视图页面中添加样式和脚本文件的引用。 然后，我们可以创建一个Controller来处理个人信息的展示逻辑。通过调用相应的服务或数据访问层，我们可以获取到个人信息的数据，然后将其传递给视图页面进行展示。 在视图页面中，我们可以使用Layui提供的表格、表单等控件来展示个人信息。通过渲染HTML元素，并将获取到的数据填充到相应的位置，就可以完成个人信息的展示。 例如，我们可以使用Layui的表格控件来展示个人信息的列表。在视图页面中，可以使用以下代码来创建一个表格： ```html <table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> @foreach (var person in Model) { <tr> <td>@person.Name</td> <td>@person.Age</td> <td>@person.Gender</td> </tr> } </tbody> </table> ``` 通过在Controller中获取个人信息数据，并将其传递给视图页面的Model，即可在页面中使用@foreach循环来遍历个人信息列表，并将其填充到表格中。 当然，以上只是一个简单的示例，实际的个人信息展示可能涉及到更多的功能和交互。但通过以上的步骤，我们可以很容易地在.NET Core MVC中使用Layui来实现个人信息的展示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值