Html html5 视频无法播放 mp4 错误“来源无效”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14079808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 video is not playing mp4 error "Invalid Source"?
提问by user576510
I am trying HTML5 video tag and I have downloaded a Microsoft sample and trying to run it but a strange thing is happening, and it is that it plays video coming from a URL (commented tag) but for local mp4 file it do not shows error and shows message "Invalid Source"
我正在尝试 HTML5 视频标签，我已经下载了一个 Microsoft 示例并尝试运行它，但发生了一件奇怪的事情，它播放来自 URL（注释标签）的视频，但对于本地 mp4 文件，它不显示错误并显示消息“无效来源”
Here is my code please guide me what I should do to make it run local file correctly ?
这是我的代码，请指导我应该怎么做才能使其正确运行本地文件？
Thanks
谢谢
<!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>
EDIT
编辑
Web page and video files both reside in the same folder.
网页和视频文件都位于同一个文件夹中。
回答by bryanp
Im on Windows 7 Pro. I develop locally and then host/serve remotely. Trying to load a local mp4 file while developing locally ran into this identical situation. No combination of using localhost/myvideo.mp4 or 127.0.0.1/myvideo.mp4 or /aaa/myvideo.mp4 or myvideo.mp4 in same directory as file got things to work...but referencing a full URL like http://www.mywebsite.com/myvideo.mp4did, as above.
我在 Windows 7 专业版上。我在本地开发，然后远程托管/服务。在本地开发时尝试加载本地 mp4 文件遇到了这种相同的情况。没有在与文件相同的目录中使用 localhost/myvideo.mp4 或 127.0.0.1/myvideo.mp4 或 /aaa/myvideo.mp4 或 myvideo.mp4 的组合使事情正常工作......但像http://www.mywebsite.com/myvideo.mp4上面一样引用完整的 URL .
On local machine, Chrome shows no error messages...just shows black box with controls. No clues as to whats up. Switched to IE and it showed the black box and controls and the error message. 'Invalid source'
在本地机器上，Chrome 没有显示错误消息......只显示带有控件的黑框。没有任何线索。切换到 IE，它显示了黑框和控件以及错误消息。'无效来源'
I focused on @steveax question and Mime types.
我专注于@steveax 问题和 Mime 类型。
Turns out IIS in this version of windows/IIS does not have a MIME type setup for .mp4. No clue why not...but not.
原来这个版本的 windows/IIS 中的 IIS 没有 .mp4 的 MIME 类型设置。不知道为什么不......但不是。
To add the MP4 MIME type, open Internet Information Services(IIS) Manager and follow these steps:
要添加 MP4 MIME 类型，请打开Internet 信息服务(IIS) 管理器并按照以下步骤操作：
- Highlight Default Web Siteon the left panel;
- Double-click MIME Typeson the right panel;
- Scroll down the list and notice that there is no .mp4;
- On the right panel again, click Add: at the first field, write
.mp4and on the field below writevideo/mp4 - Click OK and you are done.
- 突出显示左侧面板上的默认网站；
- 双击右侧面板上的MIME 类型；
- 向下滚动列表并注意没有.mp4；
- 再次在右侧面板上，单击添加：在第一个字段中，写入
.mp4并在下面的字段中写入video/mp4 - 单击确定，您就完成了。
Restart IIS!
重启IIS！
回答by Omar
I got this problem and found that the video codec was not supported.
我遇到了这个问题，发现不支持视频编解码器。
Get a video converter software (like Oxelon - it is free) and choose the output to be .mp4 (even is the source is .mp4). Choose the video codec to be "H264" and the audio codec to be "AAC". This will solve your problem.
获取视频转换器软件（如 Oxelon - 它是免费的）并选择输出为 .mp4（即使源是 .mp4）。选择视频编解码器为“H264”，音频编解码器为“AAC”。这将解决您的问题。
回答by Mika?l Mayer
I had the same problem
我有同样的问题
For Internet Explorer
对于 Internet Explorer
I used FormatFactory, setting up AAC encoding for audio and H264 for output for the mp4 format, in "High Quality and big size"
我使用了 FormatFactory，在“高质量和大尺寸”中设置音频的 AAC 编码和 mp4 格式的 H264 输出
For Google Chrome
对于谷歌浏览器
I converted my original video to the webmformat thanks to Free WebM Video Converter(make sure you uncheck everything that would like to install ads).
webm感谢Free WebM Video Converter（确保取消选中所有想要安装广告的内容），我将我的原始视频转换为该格式。
It took a long time but then it worked in Chrome.
花了很长时间，但后来它在 Chrome 中工作了。
<video controls>
<source src="thevideo.mp4" type="video/mp4">
<source src="thevideo.webm" type="video/webm">
</video>
回答by chuck
I had a similar issue but it's just with IE 11. Firefox works great.
我有一个类似的问题，但它只是与 IE 11。Firefox 工作得很好。
On IE, if I go to Compatibility View and add "localhost" to the list, the box disappears altogether.
在 IE 上，如果我转到兼容性视图并将“localhost”添加到列表中，则该框会完全消失。
