如何在Dot Net MVC 5项目中加载任意类型的视频URL

嘿，这个需求我之前处理过不少次，核心思路就是让代码自动识别视频URL的来源类型，然后渲染对应的播放容器——完全不用手动修改原始URL。下面是针对ASP.NET MVC5的具体实现方案：

1. 创建HTML Helper类 #

我们先写一个自定义的HTML Helper，用来解析不同类型的视频URL，生成对应的播放代码。这个Helper会自动判断是YouTube、Vimeo、Dailymotion还是本地视频文件，然后输出合适的iframe或video标签。

using System;
using System.Text.RegularExpressions;
using System.Web.Mvc;

public static class VideoHelper
{
    public static MvcHtmlString RenderVideo(this HtmlHelper helper, string videoUrl, int width = 640, int height = 360)
    {
        if (string.IsNullOrEmpty(videoUrl))
            return MvcHtmlString.Empty;

        // 匹配YouTube（含普通链接和短链接）
        var youtubeMatch = Regex.Match(videoUrl, @"(youtube\.com/watch\?v=|youtu\.be/)([^&?]+)", RegexOptions.IgnoreCase);
        if (youtubeMatch.Success)
        {
            var videoId = youtubeMatch.Groups[2].Value;
            var embedUrl = $"https://www.youtube.com/embed/{videoId}";
            return MvcHtmlString.Create($"<iframe width=\"{width}\" height=\"{height}\" src=\"{embedUrl}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>");
        }

        // 匹配Vimeo
        var vimeoMatch = Regex.Match(videoUrl, @"vimeo\.com/(\d+)", RegexOptions.IgnoreCase);
        if (vimeoMatch.Success)
        {
            var embedUrl = $"https://player.vimeo.com/video/{vimeoMatch.Groups[1].Value}";
            return MvcHtmlString.Create($"<iframe width=\"{width}\" height=\"{height}\" src=\"{embedUrl}\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen></iframe>");
        }

        // 匹配Dailymotion
        var dailymotionMatch = Regex.Match(videoUrl, @"dailymotion\.com/video/([^_?]+)", RegexOptions.IgnoreCase);
        if (dailymotionMatch.Success)
        {
            var embedUrl = $"https://www.dailymotion.com/embed/video/{dailymotionMatch.Groups[1].Value}";
            return MvcHtmlString.Create($"<iframe width=\"{width}\" height=\"{height}\" src=\"{embedUrl}\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>");
        }

        // 匹配本地视频文件（MP4、MOV、WEBM等）
        var supportedExtensions = new[] { ".mp4", ".mov", ".webm", ".avi" };
        foreach (var ext in supportedExtensions)
        {
            if (videoUrl.EndsWith(ext, StringComparison.OrdinalIgnoreCase))
            {
                var videoType = $"video/{ext.TrimStart('.')}";
                return MvcHtmlString.Create($"<video width=\"{width}\" height=\"{height}\" controls><source src=\"{videoUrl}\" type=\"{videoType}\">Your browser does not support the video tag.</video>");
            }
        }

        // 无法识别的URL，返回原始链接
        return MvcHtmlString.Create($"<p>Unsupported video URL: <a href=\"{videoUrl}\" target=\"_blank\">{videoUrl}</a></p>");
    }
}

2. 在视图中使用Helper #

在你的MVC视图（比如Index.cshtml）里，直接调用这个Helper方法传入视频URL即可，完全不用修改原始链接：

@{
    ViewBag.Title = "Video Player";
}

<h2>Multi-Source Video Player</h2>

<div class="video-container">
    <h3>YouTube Video</h3>
    @Html.RenderVideo("https://www.youtube.com/watch?v=OYbXaqQ3uuo")
</div>

<div class="video-container">
    <h3>Vimeo Video</h3>
    @Html.RenderVideo("https://vimeo.com/81408697")
</div>

<div class="video-container">
    <h3>Dailymotion Video</h3>
    @Html.RenderVideo("http://www.dailymotion.com/video/xaso79")
</div>

<div class="video-container">
    <h3>Local MP4 Video</h3>
    @Html.RenderVideo("https://www.myserver.com/video/testvideo.mp4")
</div>

3. 可选：响应式样式优化 #

为了让视频在不同屏幕尺寸下自适应，可以添加一些CSS样式：

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 保持16:9的宽高比 */
    height: 0;
    overflow: hidden;
    margin: 2rem 0;
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

• 部分视频平台（比如YouTube）可能会限制视频的嵌入权限，如果遇到无法播放的情况，需要确认视频是否允许嵌入。
• 本地视频要确保服务器配置了正确的MIME类型（比如MP4对应video/mp4），否则浏览器可能无法识别播放。
• 如果需要更多自定义选项（比如自动播放、静音、循环），可以在Helper方法里添加对应的参数，扩展iframe或video标签的属性。

内容的提问来源于stack exchange，提问作者Rajesh Kumar