Playing a video file from a sql server blob via ashx handler using HTML5 Video Tag

Question

I am using code from this codeproject article to upload a MP4 video file to SQL server(varbinary(MAX)) and play it back from there.

My requirement is to use SQL server specifically instead of storing and fetching videos from the file system.

This is the code I am using to play the video:

<video id='my_video_1'  controls
   width="640" height="264"
  data-setup="{"controls":true, "preload":none}" >
  <source src='<%# "VideoHandler.ashx?id=" + Eval("ID") %>' type='video/mp4'>  
</video>

If I use a physical video file as the video source, it works. However the above code does not work.

In "Internet Explorer" the tag renders a black box with a red cross

In "Chrome" the player buttons are visible but when I click play button, no video is played. When we right click it shows "Save Video as..." option and the downloaded file runs fine with a desktop media player.

Please help me with correct code.

Answer 1

The HTML5 Video tage requires support for Range Requests.

When you are serving static files this support is provided internally by the server, but in case of HttpHandler you need to provide this support by yourself. In general this means handling Range and If-Range headers in request and serving proper 206 Partial Content responses with Content-Range, Date and ETag or Content-Location headers.

The article Range Requests in ASP.NET MVC – RangeFileResult describes in details how to create an ASP.NET MVC ActionResult with Range Request support - you should be able to move all the logic from ExecuteResult method to ProcessRequest method of HttpHandler with no issues.

Answer 2

Test your <video> code block with a static video source. Once your markup is known to be good, test the handler, make sure it's encoding the video correctly and delivering the correct accepts. Try it with Media player..etc

<video id='my_video_1' controls width="640" height="264"
  data-setup='{"controls":true, "preload":none}' >
  <source src='<%# "VideoHandler.ashx?id=" + Eval("ID") %>' 
     type='video/mp4 codecs="avc1.42E01E, mp4a.40.2"'>  
</video>


public void ProcessRequest (HttpContext context) 
{
    ....
    context.Response.AppendHeader("Content-Type", "video/mp4");`
    context.Response.AppendHeader("Accept-Ranges", "bytes");

    byte[] fileContents = GetYourBytesFromWhereEver();
    context.Response.OutputStream.Write(fileContents, 0, fileContents.Length);
    context.Response.Flush();
    .....
}