HTML5 Video - data coming from database

Question

Customers are fun - coming up with new requirements all the time....

OK, so I have an ASP.NET 4.0 Webforms application where the customer is able to upload files (like PDF's or Excel documents) and those are being stored in SQL Server inside a VARBINARY(MAX) column. Works like a charm.

Now they dreamed up a new requirement: they would like to also be able to upload videos (like *.wmv, *.mp4 etc.). Contrary to the documents that just get downloaded to the customer's hard disk when requested, for the videos, they would like to have them played on my Webforms application.

After a bit of research, it would seem the HTML5 <video> tag would be the most efficient way to go. But all the samples I'm seeing out there are using file-based URL's to get the video - but I cannot seem to find any mention of how to supply the video data from a stream.

Do I really need to store my videos from my SQL Server database into a temporary file on disk to play them in my Webforms application? Or is there a nifty way to connect a .NET stream (MemoryStream) to a HTML5 <video> element to play the video on screen?

Answer 1

Simply buffer the data via a special page you make, for example: getvideo.aspx?videoid=nnn using the page as a stream proxy.

In the page you stream the data as any file, to the client setting the header mime type to video/mp4 and making sure it's in 8-bit binary format.

Then you simply set the page as video source to the element:

HTML:

<video width=640 height=320 autoplay controls>
    <source src="getvideo.aspx?videoid=123&type=mp4" type="video/mp4">
    <source src="getvideo.aspx?videoid=123&type=ogg" type="video/ogg">
    Sorry, no video support in the browser you're using.
</video>

Note that not all browsers supports the MP4 file format. You might need to consider allowing a fallback format such as OGG and WEBM.