In this article I will explain with an example, how to play Video Files (MP4) using HTML5 Video Player in ASP.Net Core Razor Pages.
 
 
Video Location
The Video file is stored in a wwwroot folder within the Website project.
ASP.Net Core Razor Pages: HTML5 Video (MP4) Player
 
 
Allowing access to Static Files in ASP.Net Core
Inside the Startup.cs class, you will need to allow Static files by calling the function UseStaticFiles. Unless this function is called, the Static files will not be accessible.
Note: For more details, please refer my article Static Files (Images, CSS and JS files) in ASP.Net Core.
 
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles();
}
 
 
Index PageModel (Code-Behind)
The PageModel consists of the following Handler method.
Handler method for handling GET operation
This Handler method is left empty as it is not required.
public class IndexModel : PageModel
{
    public void  OnGet()
    {
 
    }
}
 
 
Razor Page (HTML)
The Razor Page 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.
@page
@model Video_Player_Core_Razor.Pages.IndexModel
@{
    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
ASP.Net Core Razor Pages: HTML5 Video (MP4) Player
 
 
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
View Demo
 
 
Downloads
Download Code