In this article I will explain with an example, how to play (Live Stream) Video Files (MP4) using HTML5 Video Player in ASP.Net MVC Razor.
Video Location
The Video is stored in a folder within the Website project.
![Play (Live Stream) Video Files (MP4) using HTML5 Video Player in ASP.Net MVC]()
Controller
The Controller consists of an Action method named Index. Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
The View consists of an HTML5 Video Player element.
The HTML5 Video Player element has the following properties:
1. id – ID of the Video Player.
2. src – URL of the Video.
3. width – Width of the Video Player.
4. height – Height of the Video Player.
5. controls – If set True, it display the control Buttons such as Play Pause, Volume, etc. in the HTML5 Video Player.
6. loop – If set True, it will keep playing video i.e. once the video is completed, automatically it will start again.
The @Url.Content function is used to convert the Relative URL to Absolute URL as the HTML5 Video Player requires Absolute URL.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
<video id="VideoPlayer" src="@Url.Content("~/Videos/Butterfly.mp4")" controls="true"
width="400" height="350" loop="true"/>
</body>
</html>
Screenshot
![Play (Live Stream) Video Files (MP4) using HTML5 Video Player in ASP.Net MVC]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
