In this article I will explain with an example, how to play Video files from Server Folder (Directory) in ASP.Net Core Razor Pages.
This article will explain how to play the various Video files i.e. mp4, webm and ogg files.
Note: For beginners in ASP.Net Core (.Net Core 7) Razor Pages, please refer my article ASP.Net Core 7 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Files Folder Location

The Video file is stored in the Files Folder (Directory) of the wwwroot Folder (Directory).
Play Video file in ASP.Net Core Razor Pages
 
 

Razor PageModel (Code-Behind)

The PageModel consists of 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)

HTML Markup

Inside the View, there is an HTML5 Video element.
Note: This article makes use of HTML5 Video Player to play the videos on the web page.
 
Inside the HTML5 Video element, the source tag is added. The source tag is specified with following attributes:
src: URL of the Video file.
type: The MIME type of the Video file.
Following are the compatible Media Types for Video.
File Format
Media Type
MP4
video/mp4
WebM
video/webm
Ogg
video/ogg
 
@page
@model Video_Core_Razor.Pages.IndexModel
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
      <video controls="controls" height="300" width="240">
            <source src="/Files/Butterfly.mp4" type='video/mp4' />
      </video>
</body>
</html>
 
 

Screenshot

Play Video file in ASP.Net Core Razor Pages
 
 

Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.
Microsoft Edge  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code


Other available versions