HTML5 - 在IE9中无法播放mp4视频。

36

我有一个mp4视频,我想在IE9中使用HTML5的<video>标签播放它。我已经在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>

有什么想法吗?

谢谢

更新:

我在Firefox 5.0中尝试了相同的文件,它也无法播放mp4视频,只有Chrome能够播放。


这是最后的办法,但它确实起作用了: https://dev59.com/QHLYa4cB1Zd3GeqPYYCs - Joris Kok
13个回答

41

对于IE9,我发现需要一个meta标签来设置模式。

<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>

6
同时添加到Chrome浏览器:<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> - Navigatron
2
@Navigatron是为了澄清一点,它是针对Google ChromeFrame而言的,这是一个已停止支持的插件,适用于旧版IE浏览器,而不是谷歌浏览器(Google Chrome)。 - lacy

18
最终使用http://videojs.com/来支持所有浏览器。
但为了在IE9和Chrome中使视频正常工作,我只需添加html5文档类型并使用mp4。
<!DOCTYPE html>
<html>
<body>
  <video src="video.mp4" width="400" height="300" preload controls>
  </video>
</body>
</html>

1
这段代码在Firefox中无法运行,您需要一个webm版本。同时拥有两个版本会影响ipad和iphone的回声。必须使用jquery并根据浏览器提供源代码。 - Jeremy

17

如果它仍然不能工作,这里可能是一个肯定的解决方案:使用压缩格式H.264对mp4进行编码。 如果您使用mpeg4或divx等格式进行编码,则在IE9上不起作用,Google Chrome也可能崩溃。 为了做到这一点,我使用任何视频转换器免费软件。 但可以使用任何好的视频工具来完成。

我尝试了这里列出的所有解决方案,并尝试了其他解决方法几天,但问题在于我创建的mp4的方式。 IE9无法解码除H.264以外的其他格式。

希望这可以帮助, Jimmy


这对我有用,除了我在Mac上使用ffmpeg进行转换。 - JoeMoe1984

8
丹的答案非常棒,我建议您在目标浏览器上使用html5test.com查看支持的视频格式。 如上所述,没有一种单一的格式可以适用于所有情况。我使用的是MP4编码为H.264,WebM和flash备用方案。这让我能够在以下设备上显示视频: Windows 7 - IE9、Chrome、Firefox、Safari、Opera Windows 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 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>

注意: 应该使用h264基本配置文件对.mp4视频进行编码,以便在所有移动设备上播放。
更新:将autoplay =“false”添加到Flash回退中。这可以防止MP4在IE8上加载页面时立即开始播放,它将在按下播放按钮后开始播放。

6

Internet Explorer 9支持使用H.264编解码器的MPEG4。但是它还要求文件在开始下载时就能开始播放。

以下是如何制作在IE9中可用的MPEG文件的基本步骤(在Ubuntu上使用avconv)。我花了很多时间才搞清楚这个问题,希望能对其他人有所帮助。

  1. 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.mp4
    
  2. This 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
    

qt-faststart 是一个支持 H.264/ACC 文件格式的 Quicktime 工具,它是 libav-tools 包的一部分。


3
我有一个基本档案的.mp4视频,可以在一个服务器上播放, 但是在另一个服务器上却不能播放。
唯一的区别是:
其中一个给出了一个标题 "Content-Length: ..."
而另一个则是 "Transfer-Encoding: chunked". 我发现 Content-Length 是不必要的, 重要的是应该没有分块头。 这可以通过为 .mp4 文件关闭压缩(deflate 或 gzip)来实现。 如何做到这一点是另一个问题和另一个主题: 如何在 .htaccess 文件中禁用 Apache 的某些媒体文件的 gzip 压缩? 还可能存在另一个服务器问题:
它必须提供 "Content-Type: video/mp4"
而不是 "Content-Type: text/plain"

3
据我所知,视频支持最多只能算是有限的。
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上的Safari(3.0及更高版本)将支持QuickTime支持的任何内容。理论上,您可以要求用户安装第三方QuickTime插件。实际上,很少有用户会这样做。因此,您只能使用QuickTime“开箱即用”的格式。这是一个很长的列表,但不包括WebM、Theora、Vorbis或Ogg容器。然而,QuickTime确实带有对MP4容器中的H.264视频(主配置文件)和AAC音频的支持。

  • 像苹果的iPhone和谷歌的Android手机这样的移动电话支持在MP4容器中使用H.264视频(基本配置文件)和AAC音频(“低复杂度”配置文件)。

  • Adobe Flash(9.0.60.184及更高版本)支持在MP4容器中使用H.264视频(所有配置文件)和AAC音频(所有配置文件)。

  • Internet Explorer 9支持所有配置文件的H.264视频以及MP4容器中的AAC或MP3音频。如果安装了第三方编解码器,它也将播放WebM视频,但默认情况下不会在任何Windows版本上安装。IE9不支持其他第三方编解码器(与Safari不同,后者将播放QuickTime可以播放的任何内容)。

  • Internet Explorer 8根本没有HTML5视频支持,但几乎所有Internet Explorer用户都将拥有Adobe Flash插件。本章后面,我将向您展示如何使用HTML5视频,但要优雅地回退到Flash。

此外,您还应注意下面的小节:

没有一种容器和编解码器的组合适用于所有HTML5浏览器。

这在不久的将来不太可能改变。

为了使您的视频在所有这些设备和平台上都能观看,您需要对视频进行多次编码。


1
谢谢。这只是在我开始处理真正的网站之前进行的简单测试,不幸的是这意味着要花费很多时间对所有视频进行编码,但我想我们必须应对它。 - user623892

2

同时使用这两种格式,在所有浏览器中都能正常工作:

<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>

2

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

1
如果以上任何答案都不起作用,并且您正在使用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

我遇到了类似的问题,添加这个解决了所有的播放问题。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接