视频不会流式传输到 video-html5 标签答案

【问题标题】：Video wont stream to video-html5 tag视频不会流式传输到 video-html5 标签
【发布时间】：2021-09-21 18:58:18
【问题描述】：

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

所以我的目标：

将视频流式传输到浏览器（即，当有一个像 500mb 这样的大文件时，我不应该等待整个下载）
前进/后退/更改视频时间应该可以工作。

我在这里缺少什么来让它工作？

    [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-mvc html5-video

【解决方案1】：

如果您使用 .Net Core，则使用 FileStreamResult 会更容易。如果没有，那么最好的方法是多部分here

[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;

}

【讨论】：