视频渐进式下载 - 无法在Chrome浏览器中寻找

时间:2017-12-07 15:03:00

标签: c# html5 google-chrome video streaming

我正在尝试使用来自网络Api的来源 Chrome浏览器视频

  <video id="TestVideo" class="dtm-video-element" controls="">
     <source src="https://localhost:44305/Api/FilesController/Stream/Get" id="TestSource" type="video/mp4" />
  </video>

为了实现渐进式下载,我在服务器响应中使用了PushStreamContent

httpResponce.Content = new PushStreamContent((Action<Stream, HttpContent, TransportContext>)new StreamService(fileName,httpResponce).WriteContentToStream);

 public async void WriteContentToStream(Stream outputStream, HttpContent content, TransportContext transportContext)
    {

        //here set the size of buffer
        int bufferSize = 1024;
        byte[] buffer = new byte[bufferSize];
        //here we re using stream to read file from db server  

        using (var fileStream = IOC.Container.Resolve<IMongoCommonService>().GridRecordFiles.GetFileAsStream(_fileName))


        {
            int totalSize = (int)fileStream.Length;
            /*here we are saying read bytes from file as long as total size of file 

            is greater then 0*/

            _response.Content.Headers.Add("Content-Length", fileStream.Length.ToString());

            // _response.Content.Headers.Add("Content-Range", "bytes 0-"+ totalSize.ToString()+"/"+ fileStream.Length);
            while (totalSize > 0)
            {
                int count = totalSize > bufferSize ? bufferSize : totalSize;
                //here we are reading the buffer from orginal file  
                int sizeOfReadedBuffer = fileStream.Read(buffer, 0, count);
                //here we are writing the readed buffer to output//  

                 await outputStream.WriteAsync(buffer, 0, sizeOfReadedBuffer);



                //and finally after writing to output stream decrementing it to total size of file.  
                totalSize -= sizeOfReadedBuffer;
            }
        }
    }

我加载页面视频后立即开始播放,但我无法寻找之前(已播放)的视频秒数或在谷歌浏览器浏览器中回放它。当我尝试这样做时,视频会重新开始。 但是在 Firefox Edge 它的工作应该是这样,我可以回到已经发挥作用。我不知道如何在谷歌Chrome浏览器

中解决此问题

2 个答案:

答案 0 :(得分:0)

您应该使用HTTP部分内容。正如它描述here

  

事实证明,只有当视频文件由了解部分内容请求的服务器提供时,Chrome中元素的循环(或任何类型的搜索)才有效。 / p>

所以有一些文章可以帮助你实现它。试试这些链接:

HTTP 206 Partial Content In ASP.NET Web API - Video File Streaming

How to work with HTTP Range Headers in WebAPI

答案 1 :(得分:0)

这里是正确响应Range请求的一种实现-它从文件中读取视频并将其作为流返回到浏览器,因此不会占用服务器的内存。您将有机会决定要在代码中应用的安全性。

    [HttpGet]
    public HttpResponseMessage Video(string id)
    {
        bool rangeMode = false;
        int startByte = 0;

        if (Request.Headers.Range != null)
            if (Request.Headers.Range.Ranges.Any())
            {
                rangeMode = true;
                var range = Request.Headers.Range.Ranges.First();
                startByte = Convert.ToInt32(range.From ?? 0);
            }

        var stream = new FileStream(/* FILE NAME - convert id to file somehow */, FileMode.Open, FileAccess.Read, FileShare.ReadWrite) {Position = startByte};

        if (rangeMode)
        {
            HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.PartialContent)
            {
                Content = new ByteRangeStreamContent(stream, Request.Headers.Range, MediaTypeHeaderValue.Parse(fileDetails.MimeType))
            };
            response.Headers.AcceptRanges.Add("bytes");
            return response;
        }
        else
        {
            HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new StreamContent(stream)
            };
            response.Content.Headers.ContentType = MediaTypeHeaderValue.Parse(fileDetails.MimeType);
            return response;
        }
    }