html5 视频不播放 mp4 错误“Invalid Source”？答案

【问题标题】：html5 video is not playing mp4 error "Invalid Source"?html5 视频不播放 mp4 错误“Invalid Source”？
【发布时间】：2012-12-29 07:50:07
【问题描述】：

我正在尝试 HTML5 视频标签，我已经下载了一个 Microsoft 示例并尝试运行它，但发生了一件奇怪的事情，它播放来自 URL（注释标签）的视频，但对于本地 mp4 文件它可以不显示错误并显示消息“无效源”

这是我的代码，请指导我应该怎么做才能使其正确运行本地文件？

谢谢

    <!DOCTYPE html>
<html>
<head>
</head>
<body>
    <!--<video src="http://www.bing.com/az/hprichv/?p=Butterfly_Clipcanvas_223479_EN-US.mp4"
        autoplay loop>
    </video>-->
    <video controls src="hprichv.mp4" width="300" height="200" autoplay loop>
    </video>
</body>
</html>

编辑

网页和视频文件都位于同一个文件夹中。

【问题讨论】：

本地文件在其他多媒体播放器中能正常播放吗？
可能返回错误的 mime 类型。本地加载文件时响应头说明了什么？
@MrLister，是的，它在多媒体播放器中播放。
@steveax，它不在网络本地运行，但我可以在媒体播放器中运行。我没有在任何地方设置 mime 类型，这就是整个代码。正如我提到的，奇怪的是正在播放来自 URL 的文件。
它在所有浏览器上都无法运行吗？如果它适用于任何特定浏览器，请指定。

标签： html

【解决方案1】：

我使用的是 Windows 7 专业版。我在本地开发，然后远程托管/服务。在本地开发时尝试加载本地 mp4 文件遇到了同样的情况。在与文件相同的目录中使用 localhost/myvideo.mp4 或 127.0.0.1/myvideo.mp4 或 /aaa/myvideo.mp4 或 myvideo.mp4 的组合无法正常工作......但引用像 http://www.mywebsite.com/myvideo.mp4 这样的完整 URL 确实，如上。

在本地计算机上，Chrome 不显示任何错误消息...只是显示带有控件的黑框。没有什么线索。切换到 IE，它显示了黑框和控件以及错误消息。 '无效来源'

我专注于@steveax 问题和 Mime 类型。

原来这个版本的 windows/IIS 中的 IIS 没有 .mp4 的 MIME 类型设置。不知道为什么不……但不是。

要添加 MP4 MIME 类型，请打开 Internet 信息服务 (IIS) 管理器并按照以下步骤操作：

在左侧面板中突出显示默认网站；
双击右侧面板上的MIME Types；
向下滚动列表，发现没有.mp4；
再次在右侧面板上，单击添加：在第一个字段中输入.mp4，在下面的字段中输入video/mp4
单击“确定”即可完成。

重启 IIS！

【讨论】：

【解决方案2】：

我遇到了这个问题，发现不支持视频编解码器。

获取视频转换器软件（如 Oxelon - 它是免费的）并选择输出为 .mp4（甚至源是 .mp4）。选择视频编解码器为“H264”，音频编解码器为“AAC”。这将解决您的问题。

【讨论】：

在我的例子中，我使用 ffmpeg 使用 -acodec mp2 标志对 MP4 进行编码。我将其更改为 -acodec libvo_aacenc，它现在可以工作了。谢谢。

【解决方案3】：

我遇到了同样的问题

对于 Internet Explorer

我使用了 FormatFactory，为音频设置 AAC 编码，为 mp4 格式的输出设置 H264，在“高质量和大尺寸”中

适用于谷歌浏览器

感谢免费 WebM 视频转换器，我将我的原始视频转换为 webm 格式（确保取消选中要安装广告的所有内容）。

花了很长时间，但它在 Chrome 中运行。

<video controls>
  <source src="thevideo.mp4" type="video/mp4">
  <source src="thevideo.webm" type="video/webm">
</video>

【讨论】：

【解决方案4】：

我遇到了类似的问题，但它只是在 IE 11 上。Firefox 效果很好。

在 IE 上，如果我转到兼容性视图并将“localhost”添加到列表中，该框会完全消失。

【讨论】：