In this article I will explain with an example, how to upload and insert MP4 Video files in SQL Server Database and then play (Live Stream) the MP4 Video files using HTML5 Video Player in ASP.Net using C# and VB.Net.
Database
This article makes use of a table named tblFiles whose schema is defined as follows.
![Upload and Play (Live Stream) MP4 Video files from Database using HTML5 Video Player in ASP.Net using C# and VB.Net]()
Note: You can download the database table SQL by clicking the download link below.
HTML Markup
The HTML Markup contains a FileUpload and Button to upload and save the MP4 Video files to database and an ASP.Net DataList control to display the uploaded video files and also allows the user to play the MP4 Video file.
Note: The File.ashx is a Generic Handler (explained later) which is used to fetch the uploaded MP4 Video files from the SQL Server database and serve as source to the HTML5 Video Player.
<asp:FileUpload ID="FileUpload1" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Upload" />
<hr />
<asp:DataList ID="DataList1" Visible="true" runat="server" AutoGenerateColumns="false"
RepeatColumns="2" CellSpacing="5">
<ItemTemplate>
<u>
<%# Eval("Name") %></u>
<hr />
<video id="VideoPlayer" src='<%# Eval("Id", "File.ashx?Id={0}") %>' controls="true"
width="300" height="300" loop="true" />
</ItemTemplate>
</asp:DataList>
Namespaces
You will need to import the following namespaces.
C#
using System.IO;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.IO
Imports System.Data.SqlClient
Imports System.Configuration
Upload and Insert MP4 Video files in SQL Server Database
When the Upload Button is clicked, the MP4 Video files are uploaded to the Server. The uploaded MP4 Video files are converted into a Byte Array which is then inserted into the SQL Server Database Table.
C#
protected void Upload(object sender, EventArgs e)
{
using (BinaryReader br = new BinaryReader(FileUpload1.PostedFile.InputStream))
{
byte[] bytes = br.ReadBytes((int)FileUpload1.PostedFile.InputStream.Length);
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "INSERT INTO tblFiles(Name, ContentType, Data) VALUES (@Name, @ContentType, @Data)";
cmd.Parameters.AddWithValue("@Name", Path.GetFileName(FileUpload1.PostedFile.FileName));
cmd.Parameters.AddWithValue("@ContentType", "video/mp4");
cmd.Parameters.AddWithValue("@Data", bytes);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
Response.Redirect(Request.Url.AbsoluteUri);
}
VB.Net
Protected Sub Upload(sender As Object, e As EventArgs)
Using br As New BinaryReader(FileUpload1.PostedFile.InputStream)
Dim bytes As Byte() = br.ReadBytes(CInt(FileUpload1.PostedFile.InputStream.Length))
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand()
cmd.CommandText = "INSERT INTO tblFiles(Name, ContentType, Data) VALUES (@Name, @ContentType, @Data)"
cmd.Parameters.AddWithValue("@Name", Path.GetFileName(FileUpload1.PostedFile.FileName))
cmd.Parameters.AddWithValue("@ContentType", "video/mp4")
cmd.Parameters.AddWithValue("@Data", bytes)
cmd.Connection = con
con.Open()
cmd.ExecuteNonQuery()
con.Close()
End Using
End Using
End Using
Response.Redirect(Request.Url.AbsoluteUri)
End Sub
Populating the DataList
Inside the Page Load event, the DataList is populated with uploaded videos from Database Table.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindDataList();
}
}
private void BindDataList()
{
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT Id, Name FROM tblFiles WHERE ContentType = 'video/mp4'";
cmd.Connection = con;
con.Open();
DataList1.DataSource = cmd.ExecuteReader();
DataList1.DataBind();
con.Close();
}
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindDataList()
End If
End Sub
Private Sub BindDataList()
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand()
cmd.CommandText = "SELECT Id, Name FROM tblFiles WHERE ContentType = 'video/mp4'"
cmd.Connection = con
con.Open()
DataList1.DataSource = cmd.ExecuteReader()
DataList1.DataBind()
con.Close()
End Using
End Using
End Sub
Play (Live Stream) MP4 Video files from Database using HTML5 Video Player
The following Generic Handler will be used to serve the Videos to the HTML5 Video Player. The HTML5 Video Player will call the Generic Handler and pass the ID of the MP4 Video File to be played.
Based on the ID, the MP4 Video File will be fetched from the database and will be returned through the Response in Byte Array format.
C#
<%@ WebHandler Language="C#" Class="File" %>
using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
public class File : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int id = int.Parse(context.Request.QueryString["id"]);
byte[] bytes;
string contentType;
string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string name;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT Name, Data, ContentType FROM tblFiles WHERE Id=@Id";
cmd.Parameters.AddWithValue("@Id", id);
cmd.Connection = con;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
sdr.Read();
bytes = (byte[])sdr["Data"];
contentType = sdr["ContentType"].ToString();
name = sdr["Name"].ToString();
con.Close();
}
}
context.Response.Clear();
context.Response.Buffer = true;
context.Response.AppendHeader("Content-Disposition", "attachment; filename=" + name);
context.Response.ContentType = contentType;
context.Response.BinaryWrite(bytes);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
VB.Net
<%@ WebHandler Language="VB" Class="File" %>
Imports System
Imports System.Web
Imports System.Data.SqlClient
Imports System.Configuration
Public Class File : Implements IHttpHandler
Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim id As Integer = Integer.Parse(context.Request.QueryString("id"))
Dim bytes As Byte()
Dim contentType As String
Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Dim name As String
Using con As New SqlConnection(strConnString)
Using cmd As New SqlCommand()
cmd.CommandText = "SELECT Name, Data, ContentType FROM tblFiles WHERE Id=@Id"
cmd.Parameters.AddWithValue("@Id", id)
cmd.Connection = con
con.Open()
Dim sdr As SqlDataReader = cmd.ExecuteReader()
sdr.Read()
bytes = DirectCast(sdr("Data"), Byte())
contentType = sdr("ContentType").ToString()
name = sdr("Name").ToString()
con.Close()
End Using
End Using
context.Response.Clear()
context.Response.Buffer = True
context.Response.AppendHeader("Content-Disposition", "attachment; filename=" + name)
context.Response.ContentType = contentType
context.Response.BinaryWrite(bytes)
context.Response.[End]()
End Sub
Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class
Screenshot
![Upload and Play (Live Stream) MP4 Video files from Database using HTML5 Video Player in ASP.Net using C# and VB.Net]()
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
