下面我将为你提供几种主流的实现方法,从最简单、最推荐的方式到更传统的“手动”方式，并附上详细的代码示例和解释。

.net网页中视频本地播放器播放视频
（图片来源网络，侵删）

核心思路

无论使用哪种方法,其核心原理都是一致的：

  1. 用户选择文件：通过一个 <input type="file"> 元素让用户从本地选择视频文件。
  2. 读取文件内容：使用 JavaScript 的 FileReader API 读取用户选择的文件。
  3. 生成临时 URL：为了安全，浏览器不允许直接通过本地路径（如 C:\videos\myvideo.mp4）访问文件，我们需要使用 URL.createObjectURL() 方法为选中的文件创建一个唯一的、临时的浏览器内部 URL。
  4. 播放视频：将这个临时 URL 赋值给 HTML5 <video> 标签的 src 属性，浏览器就可以播放这个视频了。

使用 Blazor（推荐，现代 .NET Web UI 框架）

Blazor 是一个使用 .NET 构建交互式 Web UI 的框架，如果你正在使用 .NET 6/7/8，Blazor 是开发 Web 应用的首选，它允许你使用 C# 而不是 JavaScript 来处理客户端逻辑。

这是一个完整的 Blazor 组件示例 (VideoPlayer.razor)：

@page "/video-player"
@inject IJSRuntime JSRuntime
<h3>本地视频播放器 (Blazor)</h3>
<input type="file" accept="video/*" @onchange="OnFileSelected" />
@if (videoSource != null)
{
    <video width="600" height="400" controls>
        <source src="@videoSource" type="@videoType" />
        您的浏览器不支持 HTML5 视频。
    </video>
}
@code {
    private string? videoSource;
    private string? videoType;
    private async Task OnFileChange(InputFileChangeEventArgs e)
    {
        // 1. 获取用户选择的文件
        var file = e.File;
        // 2. 获取文件的 MIME 类型 ( video/mp4)
        videoType = file.ContentType;
        // 3. 使用 JSRuntime 来调用 JavaScript 的 URL.createObjectURL
        // 这是最安全、最推荐的方式，因为它隔离了 JS 互操作
        videoSource = await JSRuntime.InvokeAsync<string>("createObjectURL", file);
    }
    // 组件被销毁时，释放创建的 URL，防止内存泄漏
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender && videoSource != null)
        {
            await JSRuntime.InvokeVoidAsync("revokeObjectURL", videoSource);
        }
    }
}

对应的 JavaScript 代码

.net网页中视频本地播放器播放视频
（图片来源网络，侵删）

在你的 _Host.cshtml (Server Blazor) 或 index.html (Blazor WebAssembly) 文件的 <body> 标签结束前添加以下 <script> 

<script>
    // 为 Blazor 组件暴露的全局函数
    window.createObjectURL = (file) => {
        // 使用浏览器内置 API 创建临时 URL
        return URL.createObjectURL(file);
    };
    window.revokeObjectURL = (url) => {
        // 释放 URL，释放内存
        URL.revokeObjectURL(url);
    };
</script>

说明:

  • @onchange="OnFileSelected"：当用户选择文件后，触发 OnFileChange 方法。
  • InputFileChangeEventArgs：这是 Blazor 提供的参数，包含了选择的文件信息。
  • JSRuntime：Blazor 的服务，用于调用 JavaScript 代码，我们用它来创建和释放 URL，这是 Blazor 与浏览器 API 交互的标准方式。
  • accept="video/*"：提示文件选择器只显示视频文件。

使用 Razor Pages / MVC (传统 ASP.NET Core Web 应用)

如果你使用的是传统的 Razor Pages 或 MVC 模式，你需要在视图中编写 HTML 和 JavaScript。

Razor 视图 (VideoPlayer.cshtml)

@page
@model VideoPlayerModel
@{
    ViewData["Title"] = "本地视频播放器";
}
<h3>本地视频播放器</h3>
<input type="file" id="videoFile" accept="video/*" />
<br />
<br />
<video id="videoPlayer" width="600" height="400" controls style="display: none;">
    您的浏览器不支持 HTML5 视频。
</video>
@section Scripts {
    <script>
        document.getElementById('videoFile').addEventListener('change', function (e) {
            const file = e.target.files[0];
            const videoPlayer = document.getElementById('videoPlayer');
            if (file) {
                // 1. 获取文件的 MIME 类型
                const fileType = file.type;
                // 2. 创建临时 URL
                const url = URL.createObjectURL(file);
                // 3. 设置 video 标签的 src 和 type
                videoPlayer.src = url;
                videoPlayer.type = fileType;
                // 4. 显示 video 标签
                videoPlayer.style.display = 'block';
                // 5. 当视频播放结束或组件卸载时，释放 URL
                videoPlayer.onended = function () {
                    URL.revokeObjectURL(url);
                };
            }
        });
    </script>
}

说明:

.net网页中视频本地播放器播放视频
（图片来源网络，侵删）
  • @section Scripts：这是 Razor Pages/MVC 中定义页面特定 JavaScript 的标准位置。
  • document.getElementById(...)：使用原生 DOM API 获取 HTML 元素。
  • addEventListener('change', ...)：监听文件输入框的 change 事件。
  • 其余逻辑与方法一的 Blazor 版本完全相同，只是编写方式是纯 JavaScript。

使用 Web Forms (较老的技术，不推荐新项目使用)

如果你维护一个旧的 ASP.NET Web Forms 应用，实现方式类似，但事件处理模型不同。

ASPX 页面 (VideoPlayer.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VideoPlayer.aspx.cs" Inherits="WebFormsApp.VideoPlayer" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">本地视频播放器</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h3>本地视频播放器</h3>
            <asp:FileUpload ID="FileUpload1" runat="server" accept="video/*" />
            <br />
            <br />
            <video id="videoPlayer" runat="server" width="600" height="400" controls style="display: none;">
                您的浏览器不支持 HTML5 视频。
            </video>
        </div>
    </form>
    <script>
        // 使用 jQuery 简化 DOM 操作 (如果项目已引用 jQuery)
        $(document).ready(function () {
            $('#<%= FileUpload1.ClientID %>').change(function (e) {
                const file = e.target.files[0];
                const videoPlayer = $('#<%= videoPlayer.ClientID %>');
                if (file) {
                    const url = URL.createObjectURL(file);
                    videoPlayer.attr('src', url);
                    videoPlayer.attr('type', file.type);
                    videoPlayer.show();
                    videoPlayer.on('ended', function () {
                        URL.revokeObjectURL(url);
                    });
                }
            });
        });
    </script>
</body>
</html>

说明:

  • runat="server"：Web Forms 中，服务器控件需要这个属性。
  • <%= Control.ClientID %>：这是 Web Forms 中获取客户端 ID 的方式，因为服务器会自动生成唯一的 ID。
  • 通常会配合 jQuery 来简化 JavaScript 代码。

总结与最佳实践

特性 Blazor (方法一) Razor Pages / MVC (方法二) Web Forms (方法三)
技术栈 现代，C# 为主 传统，HTML/JS/C# 较老，HTML/JS/C#
代码组织 组件化，逻辑与视图分离 视图与控制器/页面模型分离 视图与后端代码紧密耦合
客户端逻辑 C# (通过 JSRuntime 互操作) 原生 JavaScript 或 jQuery 原生 JavaScript 或 jQuery
推荐度 ⭐⭐⭐⭐⭐ (新项目首选) ⭐⭐⭐⭐ (传统项目) ⭐⭐ (仅维护旧项目)

重要注意事项：

  1. 安全：此方法完全在客户端运行，视频文件不会上传到你的服务器，这是实现“本地播放”的关键，也保证了用户隐私和你的服务器安全。
  2. 浏览器兼容性：此方案依赖于 HTML5 的 <video> 和 FileReader API，所有现代浏览器（Chrome, Firefox, Edge, Safari）都支持。
  3. 内存管理：非常重要！ 使用 URL.createObjectURL() 创建的 URL 会占用内存，当不再需要时（例如视频播放完毕、用户选择新文件或离开页面），必须调用 URL.revokeObjectURL() 来释放它，否则会导致内存泄漏，Blazor 示例中通过 OnAfterRenderAsync 来处理这一点是很好的实践。
  4. 文件大小限制：由于视频是在浏览器中直接解码和播放，不受服务器上传大小限制，但受限于用户设备的内存和性能，非常大的视频文件可能会导致浏览器卡顿。

选择哪种方法取决于你的项目类型,对于任何新的 .NET Web 应用，Blazor 是最先进、最推荐的选择。