Video Progressive Download - can't not seek in chrome browser

Question

I'm trying to play in Chrome Browser video with source from Web Api

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

In order to implement progressive downloading I'm using PushStreamContent in server response

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

After I load page video start to play immediately, but I can not seek for previous (already played) seconds of video or rewind it as well in Google Chrome browser. When I try to do this, video goes back to the beggining. But in Firefox and Edge it's working like it should be, I can go back to already played part. I don't know how to solve this issue in Google Chrome Browser

score 0 · Answer 1 · answered Dec 12 '17 at 10:03

You should use HTTP partial content. As it described here:

As it turns out, looping (or any sort of seeking, for that matter) in elements on Chrome only works if the video file was served up by a server that understands partial content requests.

So there are some articles that may help you to implement it. Try these links:

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

How to work with HTTP Range Headers in WebAPI

user230910 · Answer 2 · 2018-09-26T09:34:24.817

Here is an implementation of responding to Range requests correctly - it reads a video from a file and returns it to the browser as a stream, so it doesnt eat up your server's ram. You get the chance to decide the security you want to apply etc in code.

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

Video Progressive Download - can't not seek in chrome browser

2 Answers2