In this article I will explain with an example, how to play Audio and Video files from server Folder (Directory) in ASP.Net MVC.
Files Location
The Audio and Video files are stored in Files Folder (Directory).
![Play Audio Video files from Server Folder (Directory) in ASP.Net MVC]()
Namespaces
You will need to import the following namespace.
Controller
The Controller consists of following Action methods.
Action method for handling GET operation
Inside this Action method, the path of all the Audio and Video files are fetched using GetFiles method of the Directory class.
Then, a generic List of SelectListItem is created.
Next, a loop is executed over the Array and each file name is fetched using the GetFileName method of Path class, while the MIME type of file is fetched using the GetMimeMapping method of the MimeMapping class.
Later, the values are copied to a generic List collection consisting objects of SelectListItem class.
Finally, the generic List of SelectListItem is returned to the View.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
//Fetch all files in the Folder (Directory).
string[] filePaths = Directory.GetFiles(Server.MapPath("~/Files/"));
//Copy File names and Mime type to generic list collection.
List<SelectListItem> items = new List<SelectListItem>();
foreach (string filePath in filePaths)
{
items.Add(new SelectListItem { Text = Path.GetFileName(filePath), Value = MimeMapping.GetMimeMapping(filePath) });
}
return View(items);
}
}
View
Inside the View, the generic List of SelectListItem is declared as model for the View.
The View consists of an HTML Table.
The Table consists of an HTML5 Audio and an Video element.
Note: I making use of HTML5 Audio Player to play the audios and HTML5 Video Player to play the videos on the web page.
Inside the Table, a loop is executed over the Model and the source is set to the HTML5 Audio and Video elements and the HTML5 Audio and Video elements is made visible based on the MIME type of file.
@model List<SelectListItem>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table>
<tr>
<th>File Name</th>
<th></th>
</tr>
@foreach (SelectListItem item in Model)
{
<tr>
<td>@item.Text</td>
<td>
@if (item.Value.StartsWith("audio/"))
{
<audio controls="controls">
<source src="/Files/@item.Text" type='audio/mpeg' />
</audio>
}
@if (item.Value.StartsWith("video/"))
{
<video src="/Files/@item.Text" controls="controls"
width="400" height="350" />
}
</td>
</tr>
}
</table>
</body>
</html>
Screenshot
![Play Audio Video files from Server Folder (Directory) in ASP.Net MVC]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
