HTML 5 Video not playing from my MVC website

Question

I have a simple MVC action that returns a FilePathResult pointing to a video. For some reason HTML5 video (using js-video.js) is not playing the video. If I change the URL to a URL I know works, the video plays fine. So it must be to do with the way I serve the file.

If I browse to the URL in the browser, the video downloads and then plays fine.

The video is .mp4 with a returned MIME type of video/mp4.

I am using Video Studio 2012, .NET 4, IIS 8 Express and Windows 7 x64 Home Premium.

Here is my respective code:

[Authorize(Roles = "File_Read")]
public FileResult Get(int? id)
{
    try
    {
        if (id == null)
            throw new ArgumentNullException("id");

        var fileRepo = FileRepositoryFactory.Repository;

        var file = fileRepo.GetById(id.Value);
        if (file == null)
            throw new InvalidOperationException(String.Format("Failed to find file with id: {0}", id));

        if (String.IsNullOrWhiteSpace(file.FilePath))
        {
            return this.File(file.Data, file.MIMEType, file.FileName);
        }
        else
        {
            return this.File(file.FilePath, file.MIMEType, file.FileName);
        }
    }
    catch (Exception ex)
    {
        return this.File("failed.txt", "text/plain");
    }
}

Here is a screen shot of what Chrome returns:

Answer 1

The HTML5 Video tage requires support for Range Requests.

In case of static file this support is provided internally by the server, but in case of ASP.NET MVC action it needs to be implemented at ActionResult level.

The article Range Requests in ASP.NET MVC – RangeFileResult describes in details how to create an ASP.NET MVC ActionResult with Range Request support. There is also a sample application which is using VideoJS available here: VideoJS in ASP.NET MVC