在 razor 页面中播放 mp4 文件答案

【问题标题】：Playing mp4 files in razor pages在 razor 页面中播放 mp4 文件
【发布时间】：2022-01-10 20:49:29
【问题描述】：

我正在尝试使用以下资源在 razor 页面中播放 `mp4` 视频：

不幸的是，它们都不适合我。

目前我在`root/Videos/one.mp4` 中有一个`mp4` 文件，这就是我的`root/Program.cs` 的样子：

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();

这是我已经在`root/Pages/Index.cshtml` 中使用以下示例尝试过的。

@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>

我的net --version 是6.0.100

有人可以帮我吗？

【问题讨论】：

不应该所有的静态资产都在 wwwroot 文件夹中吗？
出于测试目的，我放入了视频而不是 wwwroot。
好的，但是~ 解析到 wwwroot 文件夹。这就是app.UseStaticFiles(); 所做的。 root/... 不起作用。
可能是视频编码，检查HTML5 video - Browser support (wikipedia)。 MP4 只是一个容器（如 MKV 或 AVI），浏览器也必须支持视频编解码器。
另外，按 F12 并检查一切是否正常（没有 404）可能很有用

标签： c# asp.net asp.net-core video razor-pages

【解决方案1】：

根据gunr2171's 评论。解决方法如下：

而不是将`one.mp4`文件保存在：

root/Videos/one.mp4

将其移至：

root/wwwroot/Videos/one.mp4

然后在`cshtml`:

中使用

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

【讨论】：

我正在尝试使用以下资源在 razor 页面中播放 mp4 视频：

目前我在root/Videos/one.mp4 中有一个mp4 文件，这就是我的root/Program.cs 的样子：

这是我已经在root/Pages/Index.cshtml 中使用以下示例尝试过的。