时间戳

首页 > 解决方案 > 视频不会流式传输到 video-html5 标签

c# - 视频不会流式传输到 video-html5 标签

问题描述

我正在尝试实现一种 API 方法，将视频文件从私有 Azure 存储帐户流式传输到 video-html5 标签，它应该允许我在页面上前进/后退。我有一种方法可以将整个文件返回到浏览器（有效），但这样做会阻止我前进/后退视频，所以我尝试使用 PushStreamContent 但它不会将内容返回到浏览器，它只会返回元数据。

所以我的目标：

我在这里缺少什么才能使它正常工作？

    [HttpGet]
    [Route("api/video/{ext}/{filename}")]
    public async Task<HttpResponseMessage> ExecuteAsync(string filename, string ext)
    {
        
        var _filename = @"" + filename + "." + ext;

        string blobstorageconnection = _configuration.GetValue<string>("blobstorage");
        string blobContainer = _configuration.GetValue<string>("blobcontainer");

        CloudStorageAccount cloudStorageAccount = CloudStorageAccount.Parse(blobstorageconnection);
        CloudBlobClient cloudBlobClient = cloudStorageAccount.CreateCloudBlobClient();
        CloudBlobContainer cloudBlobContainer = cloudBlobClient.GetContainerReference(blobContainer);
        CloudBlockBlob blockBlob = cloudBlobContainer.GetBlockBlobReference(_filename);


        var response = new HttpResponseMessage();
        
        if (!blockBlob.Exists())
        {
            response.StatusCode = HttpStatusCode.NotFound;
            return response;
        }
        else
        {
            response.StatusCode = HttpStatusCode.OK;
        }


        response.Content = new PushStreamContent(async (outputStream, _, __) =>
        {
            try
            {
                
                await blockBlob.DownloadToStreamAsync(outputStream);
            }
            finally
            {
                outputStream.Close();
            }
        });


        response.Content.Headers.ContentType = new MediaTypeHeaderValue("video/" + ext);
        return response;

    }

这是我的 HTML 代码：

<section class="slice-lg sct-color-2 border-bottom" style="padding-top: 20px;">
    <div class="container col-11">
        <div class="row justify-content-center">
            <video width="640" controls autoplay="autoplay" preload="auto">
                <source src="/api/video/mp4/f0d67d82_mov_bbb" type="video/mp4">
            </video>
        </div>
    </div>
</section>

我的方法的输出：

{"version":{"major":1,"minor":1,"build":-1,"revision":-1,"majorRevision":-1,"minorRevision":-1},"content":{"headers":[{"Key":"Content-Type","Value":["video/mp4"]}]},"statusCode":200,"reasonPhrase":"OK","headers":[],"trailingHeaders":[],"requestMessage":null,"isSuccessStatusCode":true}

标签： c#asp.net-mvchtml5-video

解决方案

如果您使用 .Net Core，则使用 FileStreamResult 更容易。如果不是，那么最好的方法是这里的多部分

[HttpGet]
[Route("stream")]
public IActionResult Stream(string id)
{
    var ext = "mp4";
    var contentType = $"video/{ext}";
    var fileName = $"{Guid.NewGuid()}.mp4";
    var stream = new FileStream("1.mp4", FileMode.Open, FileAccess.Read) ;
    if (stream == null)
        return NotFound($"{id}");

    var result = new FileStreamResult(stream, contentType ?? "application/octet-stream")
    {
        EnableRangeProcessing = true
    };
    result.FileDownloadName = fileName;

}

推荐阅读