HTML5 视频在 chrome 中播放，但不是 IE9答案

【问题标题】：HTML5 video plays in chrome but not IE9HTML5 视频在 chrome 中播放，但不是 IE9
【发布时间】：2012-08-02 06:59:42
【问题描述】：

关于编码、htaccess 和视频元素标记，我已经尝试了您可以在 Internet 和此处找到的所有混合物，但我无法让这些视频在 IE9 中播放，而它们在 Chrome 中完美运行。有谁知道魔法仙尘让它发挥作用？ IE 中显示的只是一个黑框，中间有一个红色的 x。这是测试页面的链接：（链接已删除）

请注意，我展示了两个视频和两个标记变体。一个是直接从 Mark Pilgrim 的视频类型的书中复制的。第一个视频是使用 miro 编码的。第二个是ffmpeg。我确实在该视频目录的 htaccess 中包含“AddType video/mp4 .mp4”。

我尝试了什么或 ffmpeg 的预设组合都无关紧要，似乎没有任何效果。我对听取有关 javascript 库或任何其他库的建议不感兴趣。

EDIT1：

在看到下面@heff 的测试页面后，看来我的问题可能与我的主机 HostGator 有关，他的支持团队给了我一笔，他们不支持使用 HTML5 的网页设计工作。我在 IE9 中使用在其他浏览器和其他 Web 主机中工作的音频和标记也遇到了 HTML5 音频问题。我不知道我的问题与主机有关，但我倾向于这样认为，并将考虑与其他主机进行测试。

我在互联网和 SO 上看到了很多与我类似的问题，我想知道他们是否和我有同样的主机问题。

EDIT2：

我使用 Apache 和 FreeBSD（HostGator 使用 Centos）将视频和完全相同的网页放在办公室的本地服务器上。视频在 IE9 中播放正常。

EDIT3： 所以我让“巴克兔叔叔”工作。这是我下载的众所周知的 MP4。为什么它起作用，我不知道，但我认为我使用了与他们相同的编码器。他们一定拥有其他人没有的魔法仙尘。

EDIT4： 任何人都可以复制我的一个视频和标记并使其在他们的非 HostGator 主机上工作吗？

EDIT5： 所以看起来 IE9 正在下载 mp4 视频，但只是不播放它们或在显示红色“x”时显示控件。我最初认为视频根本没有从他们向我展示的开发工具中下载。仍然不知道该怎么做。当我重新加载页面时，我确实看到了控件的闪光。

EDIT6：已解决 正如我在其他地方暗示的那样，解决方案在于编码。有什么不同，我不知道，但我使用 ffmpeg 的编码方法得到了这个。编码显示在我下面的答案中。

正如我所说，没有其他浏览器与我使用的浏览器有问题。

【问题讨论】：

标签： html internet-explorer-9 html5-video

【解决方案1】：

编辑：正如我在上面编辑的问题中所述，我找到了解决方案。仅当您按显示的顺序放置时，以下内容才有效：

ffmpeg  -i <infile> \
        -vcodec libx264 -vpre normal \
        -acodec libfaac \
        -threads 0 <outfile>.mp4

原答案：

我花了数周时间试图让这个工作无济于事。在网上搜索，我看到无数其他人也在为此苦苦挣扎。我一直无法找到一个可以让它工作并展示它是如何完成的人（除了使用@heff 在这里使用的特殊工具）。

我无法在他们自己的论坛和文章中找到 Microsoft 的任何回复。关于可能导致问题的编码，我找不到任何东西。我发现在论坛中开始的无数线程都以相同的方式结束......没有解决方案。

所以答案很简单。 IE9 坏了。 但我们都知道这一点。充其量是无能，它是这个星球上最糟糕的浏览器。虽然微软声称它可以处理这样的视频文件，但它却没有这样做，而其他浏览器则没有任何问题。

因此，除非有人出现并提供指导，否则我会接受此答案作为最佳答案，因为它是。微软当然不能也不会提供更好的。

【讨论】：

我希望我能在 FB 或 twitter 上引用你的答案。 @Rob
@techie_28 - 随意。
这也适用于我，但 IE 10 也是如此

【解决方案2】：

mediainfo 结果对我来说没有什么突出的，所以我通过Zencoder 运行它，结果在 IE9 中适用于我。（第一个是Zencoder，第二个是你的原创）

http://www.steveheffernan.com/test/11811992/test.html

完整披露：我共同创立了 Zencoder。 Zencoder 不是一项免费服务，也不是一次性的视频编码。它旨在通过 API 自动编码。

这让我相信IE9 无法处理的文件中可能存在一些损坏。 Zencoder 修复了许多潜在的损坏并强制实现某些兼容性。您也可以尝试 Handbrake，但这也只是使用 FFmpeg/x264 afaik。

在 Zencoder 中，我使用了request builder，并没有更改任何默认设置。

{
  "input": "http://spartantheatre.org/video/test1.mp4"
}

如果您想进一步检查，这里是您的 test1.mp4 的 mediainfo 结果。

$ mediainfo test1.mp4 
General
Complete name                    : test1.mp4
Format                           : MPEG-4
Format profile                   : Base Media
Codec ID                         : isom
File size                        : 21.6 MiB
Duration                         : 2mn 14s
Overall bit rate                 : 1 348 Kbps
Writing application              : Lavf53.13.0

Video
ID                               : 1
Format                           : AVC
Format/Info                      : Advanced Video Codec
Format profile                   : Baseline@L3.0
Format settings, CABAC           : No
Format settings, ReFrames        : 1 frame
Codec ID                         : avc1
Codec ID/Info                    : Advanced Video Coding
Duration                         : 2mn 14s
Bit rate mode                    : Variable
Bit rate                         : 1 200 Kbps
Width                            : 480 pixels
Height                           : 320 pixels
Display aspect ratio             : 3:2
Frame rate mode                  : Constant
Frame rate                       : 29.970 fps
Color space                      : YUV
Chroma subsampling               : 4:2:0
Bit depth                        : 8 bits
Scan type                        : Progressive
Bits/(Pixel*Frame)               : 0.261
Stream size                      : 19.1 MiB (89%)
Writing library                  : x264 core 118 r2085 8a62835
Encoding settings                : cabac=0 / ref=1 / deblock=1:0:0 / analyse=0x1:0x111 / me=umh / subme=8 / psy=0 / mixed_ref=0 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=0 / threads=3 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=0 / weightp=0 / keyint=250 / keyint_min=25 / scenecut=40 / intra_refresh=0 / rc_lookahead=50 / rc=abr / mbtree=0 / bitrate=1200 / ratetol=1.0 / qcomp=0.60 / qpmin=10 / qpmax=51 / qpstep=4 / vbv_maxrate=10000 / vbv_bufsize=10000 / nal_hrd=none / ip_ratio=1.40 / aq=1:1.00
Language                         : English

Audio
ID                               : 2
Format                           : AAC
Format/Info                      : Advanced Audio Codec
Format version                   : Version 4
Format profile                   : LC
Format settings, SBR             : No
Codec ID                         : 40
Duration                         : 2mn 14s
Bit rate mode                    : Variable
Bit rate                         : 150 Kbps
Maximum bit rate                 : 160 Kbps
Channel(s)                       : 2 channels
Channel positions                : Front: L R
Sampling rate                    : 48.0 KHz
Stream size                      : 2.40 MiB (11%)
Language                         : English

干杯，
-heff

【讨论】：

这很有趣，因为我可以在我的 IE9 中查看您链接中的两个视频，这让我相信我的主机可能存在问题。还是你有不同的看法？
我从您的链接下载了两个视频并将它们上传到了测试站点。只有 zencoder 文件，即第四个视频，在 IE9 中播放。我还注意到 zencoder 文件比原始 mp4 文件小很多。

【解决方案3】：

我遇到了同样的问题，但我认为这是一个时间问题，我希望很容易解决。

在我的例子中，我的 HTML 页面有一个没有指定源子元素的元素。

<audio id="audio" controls="controls"/>

我在页面就绪时执行了一些 jquery 代码，将 URL 分配为音频元素的源。

audio_core=$('#audio').attr('src', 'http://mysite.com/audioFile.mp3')[0];
 audio_core.play()

Chrome 对此很满意，而 IE9 则不然。似乎 IE 在有机会完全下载之前尝试识别音频文件。

解决方法是在将文件分配给音频源之前立即执行 get 来预加载文件

var soundFileUrl='http://mysite.com/audioFile.mp3'; 
$.get(soundFileUrl, function(){
 audio_core=$('#audio').attr('src', soundFileUrl)[0];
 audio_core.play()
});

似乎有效。

【讨论】：

这将使您的流量加倍。

【解决方案4】：

IE 无法识别文件类型。尝试将此添加到 .htaccess 文件中：添加类型视频/mp4 .m4v AddType video/mp4 .mov

【讨论】：

服务器已经拥有它并提供正确的 mime 类型。问题在于视频的编码。 MP4 可以在任何地方使用，但视频元素中的 IE 除外。

【解决方案5】：

在尝试了 2 个不同的播放器库并对视频进行了 6 次不同的编码后，我发现我的服务器上的 mime 类型配置不正确（.mp4 ~ video/mepg），而不是 .mp4 ~ 视频/mp4

【讨论】：

【解决方案6】：

我也遇到过这个问题，但后来发现问题不在于 mime 类型或视频编码。我曾使用手刹对视频进行编码，它选择 AC3 作为音轨的预设而不是 AAC。用 AAC 重做后一切正常。

【讨论】：

【解决方案7】：

您是否使用 H.264 编解码器而不是标准编解码器对视频进行编码？ IE9 将下载任何扩展名为 .mp4 的文件，但它要求使用 h.264 对文件进行编码。截至目前，只有 Safari 和 IE 需要 mp4 H.264 编码。

【讨论】：

【解决方案8】：

我的工作伙伴想出了以下修复方法，效果很好，

在<!DOCTYPE html>标签之后复制下面的代码行，这将强制内容在IE 9中呈现

<meta http-equiv="X-UA-Compatible" content="IE=9" />

【讨论】：

【解决方案9】：

似乎不支持用于对视频进行编码的编解码器。

【讨论】：

你为什么这么认为？正如我所说，我使用 SO 和 Mark Pilgrim 书中建议的相同编码器和编码预设。