Video Streaming with HTML 5 and ASP.NET MVC 5

Question

I'm working on a media file management project and I was asked to evaluate the viability of including a video streaming to watch a video rather than download it (which is the current way). Sadly, I couldn't find many guides (in fact, I found many but most of them were outdated or recent references to outdated tutorials). The one that I'm following is this guide , although I don't need it to work on full screen.

So basically what I'm doing (according to the tutorial) is adding this to the HomeController.cs:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
...
public ActionResult GetVideo()
    {
        var videoPath = Request.MapPath("~/Content/music.mp4");
        FileStream fs = new FileStream(videoPath, FileMode.Open);
        return new FileStreamResult(fs, "video/mp4");
    }

And this to the Index.cshtml:

<video controls="controls" id="videoPlayer">
    <source src="~/home/getvideo" type="video/mp4">
</video>

As you can see, I'm just using MVC 5 and HTML5 because I can't add a tool or plugin in order to keep the project's simplicity.

Anyways, watching the network transactions with the Chrome DevTools I can see that there are two request to the GetVideo method:

• the first one brings the 50Mb file (which is the full mp4 file size), is initiated by the view (which is correct because of the video tag), is a GET request and returns a 200 status code.
• the second one brings 0B, is initiated by 'Other' (?), is a GET request and returns a 200 status code.

In addition to this, I can't play the file!

I added a breakpoint to the GetVideo method and I found that:

• it does indeed receive two request
• the first request enables the play button in the view (but if I click it doesn't play anything) and the second request to this method disables the play button (you know, it turns gray and can't be clicked).

So here are my questions: Why is the video not playing? And why is the controller receiving two requests?

P/S: Yes, the video is in that folder. Yes, that's the file's name and extension. Yes, I can play the video directly with the browser.

Answer 1

Returning a file stream is not the same as "streaming". Technically, the server is just pushing the video file in one go. The client is then just downloading the file the same as if they were literally downloading it. If the client (web browser) is capable of interpreting the video file and the video file is capable of being streamed (front-loads the headers), then, the browser may begin playing it before it fully completes, but this too is not really streaming . It's more akin to loading a progressive JPEG: the browser is proactively trying to display information as soon as possible before the full set of information is available. If the connection slows, the video will stop. There's no concept of buffering.

If you want to really stream a video, you need a true streaming server. There's a variety of options out there, but generally the way they work is by adapting the video file to the connection with the client: less or more bitrate. It's this interaction you won't have just pushing a file via MVC or even directly via IIS.

Regardless of whether you go with a true streaming solution or just rely on the browser playing the video as it downloads, you should still segregate this from your actual MVC site. Web servers have a finite number of requests they can handle, and they are designed to clear those requests as quick as possible (seconds or even milliseconds). They are not suited for sending large amounts of data in a single response that make take minutes or more. If a large enough number of requests comes through for the videos, you could end up deadlocking your web server and taking down your whole site. By virtue of being a different server, a streaming server would not pose this problem. Alternatively, you can host the files on a CDN.