WTM(ASP.NET 5)实现视频播放「终于解决」

大家好，欢迎来到IT知识分享网。

       在是用WTM过程中，遇到了上传视频并播放的需求。期初，我也是翻了翻MS文档，发现实现过程也挺复杂的。后来一想，自己用的是WTM框架，自带文件上传，于是我请群里的大佬Rea帮忙测试。结果发现几百兆的文件上传毫无压力。

 一、创建上传模型

public class VideoTest: BasePoco
    {
        [Display(Name = "视频标题")]
        public string Title { get; set; }
        public FileAttachment File { get; set; }
        [Display(Name = "选择视频")]
        public Guid FileId { get; set; }
    }

就和你使用WTM内置的模型中，实现用户管理中的图片是一样的。详细参照，WTM官当文档中有附件的模型章节。

二、修改appsettings.json

由于WTM内置上传文件的保存方式，可选Database,local,oss，默认的是Database，文件数据全部以二进制文件保存，直接存数据库是不是压力山大，所以修改一下改为本地或第三方云存储。我这里选本地。

1、修改FileUploadOptions SaveFileMode的值为local

2、修改FileUploadOptions Settings GroupLocation ./upload(或者是绝对路径)

三、生成业务与视图代码

这个没啥好说的，WTM代码生成器使用简单快捷，我这里也不多说了。啥也不用设置，一直下一步就行了。生成的代码，重启下web就可以直接使用了

 为了能实现预览功能，我们抄FrameworkUser的listvm代码，修改VideoTestListVM代码。

添加FileIdFormat方法，对文件进行格式化。

 private List<ColumnFormatInfo> FileIdFormat(Report_View entity, object val)
        {
            return new List<ColumnFormatInfo>
            {
                ColumnFormatInfo.MakeDownloadButton(ButtonTypesEnum.Button,entity.FileId),
                ColumnFormatInfo.MakeViewButton(ButtonTypesEnum.Button,entity.FileId,640,480),
            };
        }

 在InitGridHeader中添加this.MakeGridHeader(x => x.FileId).SetFormat(FileIdFormat)。

在GetSearchQuery修改为

try
            {
                var query = DC.Set<Report>()
                .CheckContain(Searcher.Title, x => x.Title)
                .Select(x => new Report_View
                {
                    ID = x.ID,
                    Title = x.Title,
                    FileId = x.FileId,
                })
                .OrderBy(x => x.ID);
                return query;
            }
            catch (Exception ex)
            {

                throw;
            }

这样，我们在重新启动程序。

进入对应的list后点击预览，可以查看刚刚上传的视屏

 四、使用H5视频播放

直接使用内置的文件访问接口即可，在WTM、独立HTML和SPA应用中同样适用。建议将appsettings.json中IsFilePublic，修改为true。这样不需要登录就可以访问文件了，要不然SPA转化图片或视频是真的麻烦。

<video controls="controls" width="320" height="240" poster="movie.jpg">
    <source src="/_Framework/GetFile?id=BB7CA43A-1730-474D-A6EB-D018230D21EC" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
</video>

五、自定义视频流API接口，解决进度条失效问题。

前面的四步是可以完成上传和看视频了，会出现个情况HTM Video标签直无法拖动进度条了。设置起始时间更是不行。通过资料查询，找到问题所在和解决方案，发现是响应头缺少了一些属。

1、”Cache-Control”, “max-age=31536000, must-revalidate”

2、”accept-ranges”, “bytes”

3、content-type为video/mp4

这样，我们自定义一个视频流API接口解决此问题。

    /// <summary>
    /// 多媒体数据返回
    /// </summary>
    [Public]
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class MediaController : BaseApiController
    {
        public async Task<IActionResult> Video(Guid id)
        {
            var file = await DC.Set<FileAttachment>()
                .AsNoTracking()
                .FirstOrDefaultAsync(x => x.ID == id);

            var paht = file.Path;

            Response.Headers.Add("Cache-Control", "max-age=31536000, must-revalidate");
            Response.Headers.Add("accept-ranges", "bytes");
            var content = new FileStream(paht, FileMode.Open, FileAccess.Read, 
            FileShare.Read);
            var response = File(content, "video/mp4");
            
            return response;
        }
    }

将请求视频的标签修改为

<video id="_time" controls="controls" width="320" height="240" controlslist="nodownload">
        <source src="/api/Media/Video?id=@ViewBag.id" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
 </video>

这样完美解决拖动问题，同时可通过js来进行播放控制。