9

我正在尝试 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>

编辑

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

4

4 回答 4

19

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.mp4 did, as above.

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'

I focused on @steveax question and Mime types.

Turns out IIS in this version of windows/IIS does not have a MIME type setup for .mp4. No clue why not...but not.

To add the MP4 MIME type, open Internet Information Services (IIS) Manager and follow these steps:

  • Highlight Default Web Site on the left panel;
  • Double-click MIME Types on 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 .mp4 and on the field below write video/mp4
  • Click OK and you are done.

Restart IIS!

于 2013-07-18T02:47:31.267 回答
2

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

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

于 2014-10-22T17:54:15.443 回答
1

我有同样的问题

对于 Internet Explorer

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

对于谷歌浏览器

借助 Free WebM Video Converter，我将原始视频转换为webm格式（确保取消选中要安装广告的所有内容）。

这花了很长时间，但后来它在 Chrome 中工作了。

<video controls>
  <source src="thevideo.mp4" type="video/mp4">
  <source src="thevideo.webm" type="video/webm">
</video>
于 2015-06-24T09:56:52.430 回答
0

我有一个类似的问题，但它只适用于 IE 11。Firefox 效果很好。

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

于 2017-08-03T14:55:57.347 回答