Csharp ASP.NET MVC从控制器操作流式传输视频

我有下面的视频流工作代码，从我做过的各种例子和研究中创建.它在Chrome上运行得很好，但似乎无法在Safari和移动浏览器上运行.我特别想流媒体内容，而不是下载完整的文件之前播放.

我读到过移动浏览器不喜欢自动播放，但我遇到的问题似乎并不是这样.我想我可能遗漏了什么.我try 过以不同的方式更改代码.我目前的 idea 是，这可能是Safari和/或移动浏览器解释请求负载的方式，但即使在将内容类型设置为视频/MP4之后，我也没有运气.

在我的MacBook Air上try 播放()HTML视频元素时，遇到来自Safari(13.1.2)的错误.

NotSupportdError:不支持该操作.

状态:已拒绝

堆栈:Play@[本机代码]◄全局代码↔求值@[本机代码]

我还在同一台MacBook上试用了Chrome.工作正常.

Possible Theories个

行动:

[HttpGet]
[CustomAuthorize(Roles = Roles._SYS_ADMIN)]
public async Task FetchVideo(int videoID)
{
    byte[] buffer = new Byte[4096];
    int length;
    long dataToRead;

    try
    {
        Video video = new Video();
        video.Get(videoID);

        using (MemoryStream memoryStream = new MemoryStream(video.Content))
        {
            // Total bytes to read:
            dataToRead = memoryStream.Length;

            Response.AddHeader("Accept-Ranges", "bytes");
            Response.AddHeader("Content-Disposition", "inline; filename=video.mp4");
            Response.ContentType = "video/mp4";

            int startbyte = 0;

            while (dataToRead > 0)
            {
                // Verify that the client is connected.
                if (Response.IsClientConnected)
                {
                    // Read the data in buffer.
                    length = await memoryStream.ReadAsync(buffer, 0, buffer.Length);

                    // Write the data to the current output stream.
                    await Response.OutputStream.WriteAsync(buffer, 0, buffer.Length);

                    // Flush the data to the HTML output.
                    Response.Flush();

                    buffer = new Byte[buffer.Length];
                    dataToRead = dataToRead - buffer.Length;
                }
                else
                {
                    //prevent infinite loop if user disconnects
                    dataToRead = -1;
                }
            }
        }
    }
    catch (Exception ex)
    {
        Response.Write("Error : " + ex.Message);
    }
    finally
    {
        Response.Close();
    }
}

JQuery:

$('#play-video-modal').on('show.bs.modal', function (e) {
  var promptUrl = '/Admin/Bundle/FetchVideo?videoID=' + value.Video.ID;
  var videoPlayer = $('#play-video-modal #video-player');
  videoPlayer.attr({
     'src': promptUrl, 
     'type': 'video/mp4',
     'autoplay': 'autoplay',
     'loop': 'loop',
     'muted': 'muted',
     'controls': 'controls',
     'playsinline': 'playsinline' 
  });

  // Set video description
  videoPlayer.text(data.Description);
});

HTML标记:

<!-- start: play video modall -->
<div class="modal fade" id="play-video-modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-uppercase" id="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row p-0 m-0">
                    <div class="col-md-12 p-0 m-0">
                        <div id="video-player-container" class="section d-flex justify-content-center embed-responsive embed-responsive-16by9">
                            <video id="video-player" class="embed-responsive-item" style="background-color: black;" autoplay playsinline muted>
                                <source src="" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>
            </div>
            <div id="modal-loader" class="text-center pt-4" style="display: none;">
                <div class="spinner-grow text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
            <div class="modal-footer">
                <button id="decline-modal" type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- end: play video modal -->

我绑了几件东西.我唯一在所有浏览器上都能稳定工作的解决方案就是下载整个文件，然后使用AJAX请求设置源代码.我得到的最好的流媒体效果是我在这里的代码中提供的结果，但它只能在Chrome上运行.

经过进一步的测试，我已经能够在三星Galaxy S20手机上播放/播放视频了.因此，这似乎是一个与MacOS Safari和AppleOS浏览器特别相关的问题.