HTML5 - mp4 视频无法在 IE9 中播放
Posted
技术标签:
【中文标题】HTML5 - mp4 视频无法在 IE9 中播放【英文标题】：HTML5 - mp4 video does not play in IE9 【发布时间】：2011-10-20 03:44:31 【问题描述】：我有一个 mp4 视频，我想使用 html5 <video> 标签在 IE9 中播放。我在 IIS 7 中添加了 MIME 类型，所以如果我浏览 http://localhost/video.mp4 它会在 Chrome 和 IE9 中播放，但不能在 HTML5 中播放，但 Chrome 会以 HTML 格式播放视频。代码如下：
<html>
<body>
<video src="video.mp4" preload controls>
</video>
</body>
</html>
有什么想法吗？
谢谢
更新：
在 Firefox 5.0 中尝试了相同的文件，但它也不起作用，只有 Chrome 能够播放 mp4 视频。
【问题讨论】：
这一切都失败了：***.com/questions/16732419/… 【参考方案1】：Internet Explorer 和 Edge 不支持 Chrome 支持的某些 MP4 格式。您可以使用ffprobe 查看确切的 MP4 格式。就我而言，我有这两个视频：
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'a.mp4':
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
encoder : Lavf56.40.101
Duration: 00:00:12.10, start: 0.000000, bitrate: 287 kb/s
Stream #0:0(und): Video: h264 (High 4:4:4 Predictive) (avc1 / 0x31637661), yuv444p, 1000x1000 [SAR 1:1 DAR 1:1], 281 kb/s, 60 fps, 60 tbr, 15360 tbn, 120 tbc (default)
Metadata:
handler_name : VideoHandler
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'b.mp4':
Metadata:
major_brand : isom
minor_version : 512
compatible_brands: isomiso2avc1mp41
encoder : Lavf57.66.102
Duration: 00:00:33.83, start: 0.000000, bitrate: 505 kb/s
Stream #0:0(und): Video: h264 (Constrained Baseline) (avc1 / 0x31637661), yuv420p, 1280x680, 504 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default)
Metadata:
handler_name : VideoHandler
两者都在 Chrome 中运行良好，但第一个在 IE 和 Edge 中失败。问题是 IE 和 Edge 不支持 yuv444。您可以像这样转换为更糟糕的色彩空间：
ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4
【讨论】：
【参考方案2】：没有 javascript，我唯一可以无错误地玩的方法：
<!--[if lte IE 9]>
<!-- PUT HERE A FLASH PLAYER WITH video.flv -->
<![endif]-->
<!--[if gt IE 9]><!-->
<video controls class="video">
<source src="video.mp4" type="video/mp4">
<!-- REPEAT FLASH PLAYER CODE HERE -->
</video>
<!--<![endif]-->
【讨论】：
【参考方案3】：使用这两种格式在所有浏览器中都可以正常工作：
<video controls>
<!-- MP4 must be first for iPad! -->
<source src="unbelievable.mp4" type="video/mp4" /><!-- Safari / ios video -->
<source src="movie.ogg" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
</video>
【讨论】：
【参考方案4】：如果上述任何答案都不起作用，并且您使用的是 apache 服务器，请将以下内容添加到您的 .htaccess 文件中：
//most of the common formats, add any that apply
AddType video/mp4 .mp4
AddType audio/mp4 .m4a
AddType video/mp4 .m4v
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/webm .webm
我遇到了类似的问题，添加它解决了我所有的播放问题。
【讨论】：
【参考方案5】：Internet Explorer 9 支持使用 H.264 编解码器的 MPEG4。但它也要求文件一开始下载就可以开始播放。
以下是有关如何制作可在 IE9 中运行的 MPEG 文件的非常基本的步骤（在 Ubuntu 上使用 avconv）。我花了很多时间来弄清楚这一点，所以我希望它可以帮助其他人。
使用 H.264 编解码器将视频转换为 MPEG4。你不需要任何花哨的东西，让 avconv 为你完成这项工作：
avconv -i video.mp4 -vcodec libx264 pre_out.mp4
该视频适用于所有支持 MPEG4 的浏览器，IE9 除外。要添加对 IE9 的支持，您必须将文件信息移动到文件头，以便浏览器一开始下载就可以开始播放。这是IE9的关键！！！
qt-faststart pre_out.mp4 out.mp4
qt-faststart 是一个 Quicktime 实用程序，也支持 H.264/ACC 文件格式。它是libav-tools 包的一部分。
【讨论】：
【参考方案6】：Dan 有最好的答案之一，我建议您在目标浏览器上使用 html5test.com 来查看支持的视频格式。
如上所述，没有一种格式有效，我使用的是 MP4 编码为 H.264、WebM 和 flash 回退。这让我在下面播放视频：
Win 7 - IE9、Chrome、Firefox、Safari、Opera
Win XP - IE7、IE8、Chrome、Firefox、Safari、Opera
MacBook OS X - Chrome、Firefox、Safari、Opera
iPad 2、iPad 3
Linux - android 2.3、Android 3
<video controls>
<source src="images/placeholdername.mp4" type="video/mp4" />
<source src="images/placeholdername.webm" type="video/webm" />
<embed src="images/placeholdername.mp4" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed> <!--IE 8 - add 25-30 pixels to vid height to allow QT player controls-->
</video>
注意： .mp4 视频应以 h264 基本配置文件编码，以便在所有移动设备上播放。
更新：将 autoplay="false" 添加到 Flash 后备。这样可以防止在 IE8 上加载页面时 MP4 立即开始播放，一旦按下播放按钮就会开始播放。
【讨论】：
【参考方案7】：我必须从 Windows Web App Gallery 安装 IIS Media Services 4.1。
http://www.microsoft.com/web/gallery/install.aspx?appsxml=http://www.microsoft.com/web/webpi/3.0/MediaProductList.xml&appid=MediaServices
【讨论】：
【参考方案8】：我有一个在一台服务器上播放的基本配置文件 .mp4 视频， 而不是另一个。
唯一的区别是：
一个人给出了一个标题"Content-Length: ..."
另一个"Trasfer-Encoding: chunked".
我发现不需要 Content-Length， 唯一重要的是，不应该有分块标题。 这可以通过关闭 .mp4 文件的压缩（deflate 或 gzip）来完成。 如何做到这一点是另一个问题和另一个主题： How to disable Apache gzip compression for some media files in .htaccess file?
可能还有另一个服务器问题：
它必须给"Content-Type: video/mp4"
而不是"Content-Type: text/plain"
【讨论】：
【参考方案9】：对于 IE9，我发现设置模式需要一个元标记
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<video preload controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag
</video>
【讨论】：
还为 chrome 添加： @Navigatron 澄清这是针对 Google ChromeFrame 的，它是旧版 IE 的已停产插件，不是 Google Chrome。【参考方案10】：如果它仍然无法正常工作，这肯定是一个解决方案：使用压缩格式 H.264 对 mp4 进行编码。如果您使用格式 mpeg4 或 divx 对其进行编码，否则它将无法在 IE9 上运行，并且可能会导致 Google Chrome 崩溃。为此，我使用 Any Video Converter 免费软件。但可以使用任何好的视频工具来完成。
我已经尝试了这里列出的所有解决方案，并尝试了几天的其他解决方法，但问题在于我创建 mp4 的方式。 IE9 不解码 H.264 以外的其他格式。
希望这会有所帮助， 吉米
【讨论】：
这对我有用，除了我使用 ffmpeg 在 Mac 上转换它。【参考方案11】：据我所知，视频支持最多。
来自http://diveintohtml5.ep.io/video.html#what-works：
在撰写本文时，HTML5 视频的情况如下：
Mozilla Firefox（3.5 及更高版本）在 Ogg 容器中支持 Theora 视频和 Vorbis 音频。 Firefox 4 也支持 WebM。
Opera（10.5 及更高版本）支持 Ogg 容器中的 Theora 视频和 Vorbis 音频。 Opera 10.60 也支持 WebM。
Google Chrome（3.0 及更高版本）支持 Ogg 容器中的 Theora 视频和 Vorbis 音频。 Google Chrome 6.0 也支持 WebM。
Mac 和 Windows PC（3.0 及更高版本）上的 Safari 将支持 QuickTime 支持的任何内容。理论上，您可以要求您的用户安装第三方 QuickTime 插件。实际上，很少有用户会这样做。因此，您只剩下 QuickTime 支持“开箱即用”的格式。这是一个很长的列表，但它不包括 WebM、Theora、Vorbis 或 Ogg 容器。不过，QuickTime 在 MP4 容器中支持 H.264 视频（主要配置文件）和 AAC 音频。
Apple 的 iPhone 和 Google Android 手机等手机支持 MP4 容器中的 H.264 视频（基线配置文件）和 AAC 音频（“低复杂度”配置文件）。
Adobe Flash（9.0.60.184 及更高版本）支持 MP4 容器中的 H.264 视频（所有配置文件）和 AAC 音频（所有配置文件）。
Internet Explorer 9 在 MP4 容器中支持 H.264 视频和 AAC 或 MP3 音频的所有配置文件。如果您安装了第三方编解码器，它也将播放 WebM 视频，任何版本的 Windows 默认情况下都不会安装该编解码器。 IE9 不支持其他第三方编解码器（与 Safari 不同，它将播放 QuickTime 可以播放的任何内容）。
Internet Explorer 8 根本不支持 HTML5 视频，但几乎所有 Internet Explorer 用户都将拥有 Adobe Flash 插件。在本章后面，我将向您展示如何使用 HTML5 视频，但又可以优雅地回退到 Flash。
同样，您应该在同一页面的下方注意到此部分：
没有适用于所有 HTML5 浏览器的容器和编解码器的单一组合。
这在不久的将来不太可能改变。
要让您的视频在所有这些设备和平台上都可观看，您需要对视频进行多次编码。
【讨论】：
谢谢。这是我开始在真实网站上工作之前的一个简单测试，不幸的是，这意味着要花费大量时间对所有视频进行编码，但我想必须处理它。【参考方案12】：最终使用http://videojs.com/ 来支持所有浏览器。
但是为了让视频在 IE9 和 Chrome 中运行，我只是添加了 html5 文档类型并使用了 mp4：
<!DOCTYPE html>
<html>
<body>
<video src="video.mp4" preload controls>
</video>
</body>
</html>
【讨论】：
此代码在 Firefox 中不起作用，您还需要一个 webm 版本。并且同时拥有这两个版本会妨碍 ipad 和 iphone 中的回声。必须使用 jquery 并根据浏览器提供源代码。【参考方案13】：尝试以下方法，看看是否有效：
<video preload controls>
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
【讨论】：
我收到“您的浏览器不支持视频标签。”以上是关于HTML5 - mp4 视频无法在 IE9 中播放的主要内容，如果未能解决你的问题，请参考以下文章
HTML5 .mp4 视频 - IE 问题 - 将白色变为灰色
HTML5 视频：ffmpeg 编码的 MP4 不在任何浏览器中播放（虽然在 VLC 中播放）
html5 视频无法在 Windows 上的 Safari 中播放