In this article I will explain with an example, how to play audio and video file from server Folder (Directory) in
ASP.Net using C# and VB.Net.
HTML Markup
The following
HTML Markup consists of:
GridView – For displaying the records.
The
GridView consists of a
BoundField and a
TemplateField column.
TemplateField
The
TemplateField consists of two
ASP.Net Panel controls which consists of
HTML5 Audio and
Video elements.
Note: I making use of HTML5
Audio Player to play the audios and HTML5
Video Player to play the videos on the web page.
The Panel controls are made visible based on the MIME type of file.
<asp:GridView runat="server" ID="gvFiles" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Text" HeaderText="File Name" />
<asp:TemplateField>
<ItemTemplate>
<asp:Panel runat="server" Visible='<%# Eval("Value").ToString().StartsWith("audio/")? true : false %>'>
<audio controls>
<source src='<%# ResolveUrl("~/Files/" +Eval("Text"))%>' type='audio/mpeg' />
</audio>
</asp:Panel>
<asp:Panel runat="server" Visible='<%# Eval("Value").ToString().StartsWith("video/")? true : false %>'>
<video src='<%# ResolveUrl("~/Files/" + Eval("Text"))%>' controls="true"
width="300" />
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Populating Audio and Video File from Server Folder (Directory)
Inside the Page Load event handler, the BindGrid method is called.
BindGrid
Inside BindGrid method, the path of the folder which consists of audio and video files is referenced.
Then, the Generic List of ListItem is created and a FOR EACH loop is executed over the referenced folder and each file is added to it.
All files are added with name fetched using the GetFileName method of Path class and the MIME type of file fetched using the GetMimeMapping method of the MimeMapping class.
Then, the Generic List of ListItem is assigned to the DataSource property of the GridView.
Finally, the
GridView is populated with the files fetched from the Folder (Directory).
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
private void BindGrid()
{
string[] files = Directory.GetFiles(Server.MapPath("~/Files/"));
List<ListItem> items = new List<ListItem>();
foreach (string file in files)
{
items.Add(new ListItem(Path.GetFileName(file), MimeMapping.GetMimeMapping(file)));
}
gvFiles.DataSource = items;
gvFiles.DataBind();
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindGrid()
End If
End Sub
Private Sub BindGrid()
Dim files As String() = Directory.GetFiles(Server.MapPath("~/Files/"))
Dim items As List(Of ListItem) = New List(Of ListItem)()
For Each file As String In files
items.Add(New ListItem(Path.GetFileName(file), MimeMapping.GetMimeMapping(file)))
Next
gvFiles.DataSource = items
gvFiles.DataBind()
End Sub
Screenshot
![Play Audio and Video File from Server Folder (Directory) in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
