Streaming video file as 'FileContentResult': Not able to forward/backward the video content

Question

I have created .Net Core API + React Project and trying to stream a video file from Azure Blob Storage like the following code. The API code is working fine, but when I play the video file, I am not able to forward or backward the video timings.

my C# API code,

[AllowAnonymous]
    [HttpGet("writetostreamfromblob")]
    public async Task<FileContentResult> WriteToStreamFromBlob(string filename)
    {
        try
        {
            return await _documentsService.FielStreamFromBlob() ;
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

My DocumentService method,

 public async Task<FileContentResult> FielStreamFromBlob()
    {
        try
        {
            var cloudBlob = await _blobService.GetBlobAsync(PlatformServiceConstants._blobIntroductoryVideoContainerPath + PlatformServiceConstants.IntroductoryVideo1, introductoryvideocontainerName);
            var fileStream = new MemoryStream();

            MemoryStream memStream = new MemoryStream();

            await cloudBlob.DownloadToStreamAsync(memStream);
            return new FileContentResult (memStream.ToArray(), "application/octet-stream");
        }
        catch (Exception e)
        {
            throw e;
        }

    }

And my React or HTML code to render the file content,

 <div className="content__area__container" style={{width:'50%',float:'right',marginTop:'100px'}}>
            <video height="auto" controls style={{ width: '100%' }}>
                <source src="documents/writetostreamfromblob?filename=Beach" type="video/mp4" />
      </video>
    </div>

The video playing without any error but not able to start or forward the video, Where did I go wrong?. Is this a proper approach in .Net Core?

I think that your server needs to support [range requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests). I looked up HTML 5 video seek problems, and I think I might be right. See [this answer](https://stackoverflow.com/questions/10583931/cant-seek-html5-video-or-audio-in-chrome). — Llama, May 15 '20 at 06:33

score 3 · Accepted Answer · answered May 15 '20 at 06:33

You need to set EnableRangeProcessing property to true in order to make it support navigation.

MemoryStream memStream = new MemoryStream();
await cloudBlob.DownloadToStreamAsync(memStream);
var result =  FileContentResult (memStream.ToArray(), "application/octet-stream");
result.EnableRangeProcessing = true;
return result;

Streaming video file as 'FileContentResult': Not able to forward/backward the video content

1 Answers1