Html HTML5 - mp4 视频无法在 IE9 中播放
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6944679/
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 - mp4 video does not play in IE9
提问by clif
I have an mp4 video that I want to play in IE9 using HTML5 <video>tag. I added the MIME type to IIS 7 so if I browse http://localhost/video.mp4it plays in both Chrome and IE9 but not in HTML5, Chrome plays the video in HTML though. Here's the code:
我有一个 mp4 视频，我想使用 HTML5<video>标签在 IE9 中播放。我在 IIS 7 中添加了 MIME 类型，所以如果我浏览http://localhost/video.mp4它在 Chrome 和 IE9 中播放但不在 HTML5 中播放，Chrome 会以 HTML 播放视频。这是代码：
<html>
<body>
<video src="video.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
Any ideas?
有任何想法吗？
Thanks
谢谢
UPDATE:
更新：
Tried the same file in Firefox 5.0 and it didn't work either, only Chrome is able to play the mp4 video.
在 Firefox 5.0 中尝试了相同的文件，但它也不起作用，只有 Chrome 能够播放 mp4 视频。
采纳答案by clif
Ended up using http://videojs.com/to support all browsers.
最终使用http://videojs.com/来支持所有浏览器。
But to get the video working in IE9 and Chrome I just added html5 doc type and used mp4:
但是为了让视频在 IE9 和 Chrome 中工作，我只是添加了 html5 文档类型并使用了 mp4：
<!DOCTYPE html>
<html>
<body>
<video src="video.mp4" width="400" height="300" preload controls>
</video>
</body>
</html>
回答by clif
for IE9 I found that a meta tag was required to set the mode
对于 IE9 我发现需要一个元标记来设置模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<video width="400" height="300" preload controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag
</video>
回答by Jimmy Boyd
If it's still not working here's what may certainly be a solution: encode the mp4 with compression format H.264. If you encode it with format mpeg4 or divx or else it will not work on IE9 and may as well crash Google Chrome. To do that, I use Any Video Converter freeware. But it could be done with any good video tool out there.
如果它仍然不起作用，那么这肯定是一个解决方案：使用压缩格式 H.264 对 mp4 进行编码。如果您使用格式 mpeg4 或 divx 对其进行编码，否则它将无法在 IE9 上运行，并且可能会导致 Google Chrome 崩溃。为此，我使用 Any Video Converter 免费软件。但是它可以通过任何好的视频工具来完成。
I've been trying all solutions listed here and tried other workaround for days but the problem lied in the way I created my mp4. IE9 does not decode other format than H.264.
我一直在尝试此处列出的所有解决方案，并尝试了其他解决方法数天，但问题在于我创建 mp4 的方式。IE9 不解码 H.264 以外的其他格式。
Hope this helps, Jimmy
希望这会有所帮助，吉米
回答by user1344843
Dan has one of the best answers up there and I'd suggest you use html5test.comon your target browsers to see the video formats that are supported.
Dan 有最好的答案之一，我建议您在目标浏览器上使用html5test.com来查看支持的视频格式。
As stated above, no single format works and what I use is MP4 encoded to H.264, WebM, and a flash fallback. This let's me show video on the following:
如上所述，没有一种格式有效，我使用的是 MP4 编码为 H.264、WebM 和 Flash 回退。这让我展示以下视频：
Win 7 - IE9, Chrome, Firefox, Safari, Opera
Win 7 - IE9、Chrome、Firefox、Safari、Opera
Win XP - IE7, IE8, Chrome, Firefox, Safari, Opera
Win XP - IE7、IE8、Chrome、Firefox、Safari、Opera
MacBook OS X - Chrome, Firefox, Safari, Opera
MacBook OS X - Chrome、Firefox、Safari、Opera
iPad 2, iPad 3
iPad 2、iPad 3
Linux - Android 2.3, Android 3
Linux - 安卓 2.3、安卓 3
<video width="980" height="540" 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" width="980" height="570" allowscriptaccess="always" allowfullscreen="true" autoplay="false"></embed> <!--IE 8 - add 25-30 pixels to vid height to allow QT player controls-->
</video>
Note: The .mp4 video should be coded in h264 basic profile, so that it plays on all mobile devices.
注意：.mp4 视频应编码为 h264 基本配置文件，以便在所有移动设备上播放。
Update: added autoplay="false" to the Flash fallback. This prevents the MP4 from starting to play right away when the page loads on IE8, it will start to play once the play button is pushed.
更新：在 Flash 回退中添加了 autoplay="false"。这可以防止 MP4 在 IE8 上加载页面时立即开始播放，一旦按下播放按钮，它将开始播放。
回答by Gael Lafond
Internet Explorer 9 support MPEG4 using H.264 codec. But it also required that the file can start to play as soon as it starts downloading.
Internet Explorer 9 支持使用 H.264 编解码器的 MPEG4。但它也要求文件一开始下载就可以开始播放。
Here are the very basic steps on how to make a MPEG file that works in IE9 (using avconv on Ubuntu). I spent many hours to figure that out, so I hope that it can help someone else.
以下是有关如何制作可在 IE9 中运行的 MPEG 文件的基本步骤（在 Ubuntu 上使用 avconv）。我花了很多时间来解决这个问题，所以我希望它可以帮助别人。
Convert the video to MPEG4 using H.264 codec. You don't need anything fancy, just let avconv do the job for you:
avconv -i video.mp4 -vcodec libx264 pre_out.mp4This video will works on all browsers that support MPEG4, except IE9. To add support for IE9, you have to move the file info to the file header, so the browser can start playing it as soon as it starts to download it. THIS IS THE KEY FOR IE9!!!
qt-faststart pre_out.mp4 out.mp4
使用 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-faststartis a Quicktime utilities that also support H.264/ACC file format. It is part of libav-toolspackage.
qt-faststart是一个 Quicktime 实用程序，也支持 H.264/ACC 文件格式。它是libav-tools包的一部分。
回答by Balazs Nemeth
I have a base profile .mp4 video which plays on one server, and does not on another.
我有一个基本配置文件 .mp4 视频，它在一台服务器上播放，但不在另一台服务器上播放。
The only difference is:
one gives a header "Content-Length: ..."
the other "Trasfer-Encoding: chunked".
唯一的区别是：
一个给一个标题"Content-Length: ..."
另一个"Trasfer-Encoding: chunked".
I found out that Content-Length is not needed, it is only important, that there should be NO chunked header. This can be done by turning off compression (deflate or gzip) for .mp4 files. How this can be done is another issue and another topic: How to disable Apache gzip compression for some media files in .htaccess file?
我发现 Content-Length 不是必需的，它只是重要的，不应该有分块的标题。这可以通过关闭 .mp4 文件的压缩（deflate 或 gzip）来完成。如何做到这一点是另一个问题和另一个主题： 如何对 .htaccess 文件中的某些媒体文件禁用 Apache gzip 压缩？
There can be another server issue:
it has to give "Content-Type: video/mp4"
and NOT "Content-Type: text/plain"
可能还有另一个服务器问题：
它必须给予"Content-Type: video/mp4"
而不是"Content-Type: text/plain"
回答by stslavik
From what I've heard, video support is minimal at best.
据我所知，视频支持充其量是最少的。
From http://diveintohtml5.ep.io/video.html#what-works:
来自http://diveintohtml5.ep.io/video.html#what-works：
As of this writing, this is the landscape of HTML5 video:
Mozilla Firefox (3.5 and later) supports Theora video and Vorbis audio in an Ogg container. Firefox 4 also supports WebM.
Opera (10.5 and later) supports Theora video and Vorbis audio in an Ogg container. Opera 10.60 also supports WebM.
Google Chrome (3.0 and later) supports Theora video and Vorbis audio in an Ogg container. Google Chrome 6.0 also supports WebM.
Safari on Macs and Windows PCs (3.0 and later) will support anything that QuickTime supports. In theory, you could require your users to install third-party QuickTime plugins. In practice, few users are going to do that. So you're left with the formats that QuickTime supports “out of the box.” This is a long list, but it does not include WebM, Theora, Vorbis, or the Ogg container. However, QuickTime does ship with support for H.264 video (main profile) and AAC audio in an MP4 container.
Mobile phones like Apple's iPhone and Google Android phones support H.264 video (baseline profile) and AAC audio (“low complexity” profile) in an MP4 container.
Adobe Flash (9.0.60.184 and later) supports H.264 video (all profiles) and AAC audio (all profiles) in an MP4 container.
Internet Explorer 9 supports all profiles of H.264 video and either AAC or MP3 audio in an MP4 container. It will also play WebM video if you install a third-party codec, which is not installed by default on any version of Windows. IE9 does not support other third-party codecs (unlike Safari, which will play anything QuickTime can play).
Internet Explorer 8 has no HTML5 video support at all, but virtually all Internet Explorer users will have the Adobe Flash plugin. Later in this chapter, I'll show you how you can use HTML5 video but gracefully fall back to Flash.
在撰写本文时，这是 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。
As well, you should note this section just below on the same page:
同样，您应该在同一页面的下方注意此部分：
There is no single combination of containers and codecs that works in all HTML5 browsers.
This is not likely to change in the near future.
To make your video watchable across all of these devices and platforms, you're going to need to encode your video more than once.
没有容器和编解码器的单一组合适用于所有 HTML5 浏览器。
这在不久的将来不太可能改变。
为了让您的视频在所有这些设备和平台上均可观看，您需要多次对视频进行编码。
回答by Timmmm
Internet Explorer and Edge do not support some MP4 formats that Chrome does. You can use ffprobeto see the exact MP4 format. In my case I have these two videos:
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
Both play fine in Chrome, but the first one fails in IE and Edge. The problem is that IE and Edge don't support yuv444. You can convert to a shittier colourspace like this:
两者在 Chrome 中都运行良好，但第一个在 IE 和 Edge 中失败。问题是IE 和 Edge 不支持 yuv444。您可以像这样转换为更糟糕的色彩空间：
ffmpeg -i input.mp4 -pix_fmt yuv420p output.mp4
回答by shihab
use both format it works fine in all browser:
使用这两种格式它在所有浏览器中都可以正常工作：
<video width="640" height="360" 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>
回答by wiz
If any of these answers above don't work, and you're on an apache server, adding the following to your .htaccess file:
如果以上这些答案中的任何一个不起作用，并且您在 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
I had a similar problem and adding this solved all my playback issues.
我有一个类似的问题，添加它解决了我所有的播放问题。
