HTML5 - How to transfer large .mp4 files?

Question

I am trying to set up a very basic html5 page that downloads video in .mp4 format, which is 20 MB. It looks like the browser needs to download the whole thing, and not just play the first part of the video and stream the rest.

This post is the closest thing I found during the search ... I tried both Hand Brake and Data Go Round, none of them changed:

Any ideas on how to do this or if possible?

Here is the code I'm using:

<video controls="controls"> <source src="/video.mp4" type="video/mp4" /> Your browser does not support the video tag. </video> 

Answer 1

• Make sure that moov (metadata) is before mdat (audio / video data) . This is also called a “quick start” or “optimized website”. For example, Handbrake has the "Optimized Website" checkbox and ffmpeg and avconv have the -movflags faststart output option.
• Make sure your web server reports the correct content type (video / mp4).
• Make sure your web server is configured to serve byte range requests .
• Make sure your web server is not using gzip or compressing compression over compression in the mp4 file.

You can check the headers sent by your web server using curl -I http://yoursite/video.mp4 or using the developer tools in your browser ( Chrome , Firefox ) (reload the page if it is cached). The header of the HTTP response should include Content-Type: video / mp4 and Accept-Ranges: bytes and Content-Encoding: ... p>

Answer 2

Here is the solution I used to create a web API controller in C # (MVC) that will serve video files with byte ranges (partial requests). Partial queries allow the browser to download as many videos as needed, rather than downloading all videos. This makes it much more efficient.

Please note that this only works in the latest versions.

 var stream = new FileStream(videoFilename, FileMode.Open, FileAccess.Read , FileShare.Read); var mediaType = MediaTypeHeaderValue.Parse($"video/{videoFormat}"); if (Request.Headers.Range != null) { try { var partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent); partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, mediaType); return partialResponse; } catch (InvalidByteRangeException invalidByteRangeException) { return Request.CreateErrorResponse(invalidByteRangeException); } } else { // If it is not a range request we just send the whole thing as normal var fullResponse = Request.CreateResponse(HttpStatusCode.OK); fullResponse.Content = new StreamContent(stream); fullResponse.Content.Headers.ContentType = mediaType; return fullResponse; }