ASP.NET MVC中使用video标签插入视频无法播放的问题求助

问题回顾 #

在ASP.NET MVC项目中使用<video>标签插入视频，代码中用~/表示项目根路径，但页面仅显示空白视频控件：进度条无法拖动，控件显示“暂停”图标却无法播放；但能通过控件菜单下载视频，本地播放器可正常播放。

已尝试的操作：

• 为<video>标签直接添加src属性
• 移除<source>标签的type属性或直接移除<source>标签
• 设置controls="controls"属性
• 查阅资料并求助

解决步骤 #

1. 正确解析根路径~ #

HTML原生<video>/<source>是客户端元素，无法识别ASP.NET的~根路径符号，需用Razor语法生成正确的服务器路径：

<video controls>
    <source src="@Url.Content("~/show.mp4")" type="video/mp4">
    无法加载视频。
</video>

Url.Content()会将~转换为当前项目的根URL，确保浏览器能正确定位视频资源。

2. 配置MP4的MIME类型 #

IIS默认可能未正确配置MP4的MIME类型，导致浏览器无法识别视频格式。在项目的Web.config中添加以下配置：

<configuration>
  <system.webServer>
    <staticContent>
      <!-- 添加MP4的MIME类型映射 -->
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
    </staticContent>
  </system.webServer>
</configuration>

该配置会让服务器正确返回MP4文件的Content-Type，确保浏览器能解析视频。

3. 验证视频编码兼容性 #

浏览器仅支持H.264视频编码 + AAC音频编码的MP4文件，若视频使用其他编码（如MPEG-4视频编码），本地播放器可能兼容，但网页无法播放。
可使用FFmpeg工具重新转码：

ffmpeg -i show.mp4 -c:v libx264 -c:a aac -strict -2 show_web.mp4

转码后替换原视频文件，再测试播放。

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