logo标签列表

HTML5视频无法播放MP4错误"无效来源"？

html
9

我正在尝试使用HTML5视频标签，并下载了一个微软示例来运行，但奇怪的事情发生了，它可以播放来自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>

编辑

网页和视频文件都存储在同一个文件夹中。

本地文件在其他多媒体播放器上可以正常播放吗？ - Mr Lister
1
当地加载文件时，响应头部信息是什么？可能会返回错误的MIME类型。 - steveax
@MrLister，是的，它可以在多媒体播放器中播放。 - user576510
@steveax，它在Web本地运行不了，但我可以在媒体播放器中运行它。我没有设置任何mime类型，这就是整个代码。正如我所提到的，奇怪的是来自URL的文件正在被播放。 - user576510
它在所有浏览器上都无法运行吗？ 如果它能在某个特定的浏览器中工作，请指明。 - Pankaj Parashar
@PankajParashar 它在任何浏览器中都不起作用。 - user576510
4个回答
19

我使用的是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 Information Services（IIS）管理器，然后按照以下步骤操作：

  • 在左侧面板上选择默认网站；
  • 在右面板上双击MIME类型；
  • 向下滚动列表，注意到没有.mp4；
  • 再次在右面板上，单击添加：在第一个字段中，写入.mp4，在下面的字段中写入video/mp4
  • 单击"确定"，完成操作。

重新启动IIS!

3

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

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

在我的情况下，我使用了ffmpeg来使用-acodec mp2标志对MP4进行编码。我将其更改为-acodec libvo_aacenc，现在它可以正常工作了。谢谢。 - Brian Hadaway
1
我遇到了同样的问题。
对于Internet Explorer：
我使用了FormatFactory，设置AAC编码用于音频，H264用于输出mp4格式，在“高质量和大尺寸”下进行转换。
对于Google Chrome：
我将原始视频转换为webm格式，使用了Free WebM Video Converter（确保取消选择任何想要安装的广告）。
虽然需要花费很长时间，但最终在Chrome中起作用了。
<video controls>
  <source src="thevideo.mp4" type="video/mp4">
  <source src="thevideo.webm" type="video/webm">
</video>
0

我遇到了类似的问题，但只出现在IE 11上。火狐浏览器运行良好。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接