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:

Network

File get request

Failed mp4 request

Failed mp4 request details

score 6 · Accepted Answer · answered Nov 14 '12 at 08:20

6

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

answered Nov 14 '12 at 08:20

tpeczek

23,867
3
74
77

Thanks for that. I have it working with mp3 files, but my mp4 doesn't work. I have added the screen shots with the error information in my main post. – rhughes Nov 14 '12 at 16:05
@rhughes The content-length you have marked is correct because the request has the `Range: bytes=518758-518758` header (the browser is asking for one byte). There are some issue with playing mp4 files on Chrome (unsupported encodings etc.) just google to find some. I suggest to test your mp4 file in another browser, and test an mp4 which is known to be working in Chrome (this one should be good - http://www.longtailvideo.com/jw/upload/bunny.mp4 first test it from this location than download and use in your app). Also make sure there are proper codes in your markup of HTML5 video/source. – tpeczek Nov 14 '12 at 20:11
I have tried the bunny video and it works fine in IE 9, but not in Chrome. Do you know why this is? – rhughes Nov 15 '12 at 03:28
@rhughes From what I know Chrome doesn't support some of encodings which can be used for mp4 files, you can find a lot of threads regarding this when you google `'chrome mp4 issue'`. I'm affraid that I'm not a guru in video encoding subject (I'm not even sure if this is a subject for StackOverflow) but your test confirms that the ASP.NET MVC part works correctly and the issue is in Chrome. I suggest you ask a separate question regarding the Chrome issue in place where you can find some Chrome specialists. – tpeczek Nov 15 '12 at 08:20
That makes sense. Google has thrown up some interesting comments. Thank for your help! – rhughes Nov 15 '12 at 08:44
@tpeczek, I am encountering problems with RangeFileResult and this error: "server cannot set status after http headers have been sent". When playing videos in Chrome, using RangeFileResult, the video frequently dissappears and displays the message 'Video not properly encoded', I think this may be related to the previous error message I mention, any ideas? – DevDave Jan 14 '13 at 16:58
@Tyler I would need to know a lot more about your project in order to be able to say anything. Please feel free to contact me directly via email (available in my profile). – tpeczek Jan 14 '13 at 19:09
@tpeczek I have posted a question on Stack because it is easier to read, http://stackoverflow.com/questions/14336690/error-with-html5-video-in-chrome-using-rangefilepathresult, hope you don't mind – DevDave Jan 15 '13 at 11:26

HTML 5 Video not playing from my MVC website

1 Answers1