在 razor 页面中播放 mp4 文件

Question

I'm trying to play mp4 video in razor page using resources below:

• Displaying Video in an ASP.NET Web Pages (Razor) Site
• How to Play Video in ASP.NET CORE Using HTML 5
• Play (Live Stream) Video Files (MP4) using HTML5 Video Player in ASP.Net MVC
• How To Dynamically Upload And Play Video File Using ASP.NET MVC 5
• HTML Video

Unluckily none of them worked for me.

Currently I have one mp4 file in root/Videos/one.mp4 and this is how my root/Program.cs looks like:

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorPages().AddRazorRuntimeCompilation();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthorization();

app.MapRazorPages();

app.Run();

This is what I already tried in root/Pages/Index.cshtml using following examples.

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1>Embedded Video Example</h1>
    <p>The following video provides an introduction to WebMatrix:</p>

    <!-- example 1 -->
    <video id="VideoPlayer" src="~/Videos/one.mp4" type="video/mp4" controls="true"
        width="400" height="350" loop="true"/>

    <!-- example 2 -->
    <video id="VideoPlayer" src=@Url.Content("~/Videos/one.mp4")" type="video/mp4" controls="true"
        width="400" height="350" loop="true"/>

    <!-- example 3 -->
    <video id="VideoPlayer" controls="true" width="400" height="350">
        <source src="~/Videos/one.mp4" type="video/mp4">
    </video>

    <!-- example 4 -->
     <video id="VideoPlayer" controls="true" width="400" height="350">
        <source src="@Url.Content("~/Videos/one.mp4")" type="video/mp4">
    </video> 

    <!-- example 5 -->
    <iframe width="560" height="315" src="~/Videos/one.mp4" frameborder="0" type="video/mp4"
        allowfullscreen></iframe>

    <!-- example 6 -->
    <iframe width="560" 
                height="315"
                type="video/mp4"
                src="@Url.Content("~/Videos/one.mp4")" 
                frameborder="0" 
                allowfullscreen></iframe>
</div>

My net --version is 6.0.100

Can someone help me with that?

Answer 1

According to the gunr2171's comment. Solution below:

Instead of keeping one.mp4 file in:

root/Videos/one.mp4

Move it to:

root/wwwroot/Videos/one.mp4

and then use in cshtml :

<video id="VideoPlayer" src="~/videos/one.mp4" controls width="450" height="450" loop />