如何让 HTML5 视频使用 IE10 工作答案

【问题标题】：How do I get a HTML5 Video to work using IE10如何让 HTML5 视频使用 IE10 工作
【发布时间】：2013-03-16 09:19:32
【问题描述】：

我希望有人知道我可以做些什么来帮助我在本地 Intranet 上播放 HTML5 视频。

我的 Web 服务器 = Windows Server 2008 R2 Standard 64bit IIS 版本= IIS7

测试用户环境 = Windows 7 企业版

使用“谷歌浏览器”完美播放视频

使用“IE10”播放视频失败

我的html代码如下：

<!DOCTYPE html>
<html>
    <body>
        <video src="AccReadings.mp4" width="400" height="300" preload controls>
        </video>
    </body>
</html>

我使用 IE10 的测试机可以播放 HTML5Rocks 视频 'http://craftymind.com/factory/html5video/CanvasVideo.html'

问候，

克里斯

【问题讨论】：

当您说“无法播放”时，您会收到错误消息吗？

标签： windows-7 iis-7 html5-video windows-server-2008-r2 internet-explorer-10

【解决方案1】：

确保您将 Web 服务器设置为使用 MIME 类型 video/mp4 用于 .mp4。我不小心将 .mp4 设置为使用 MIME 类型video/mpeg，视频在 Chrome 中播放，但在 IE11 中没有。

您还需要确保视频使用 H264 视频编解码器和 AAC 音频编解码器

【讨论】：

我有一个 MIME 类型错误的视频（上传到 Amazon S3） (application/octet-stream)。 IE10 是唯一拒绝播放它的浏览器。将 MIME 类型更改为video/mp4（显然是 mp4 视频）后，IE10 开始播放。

【解决方案2】：

我刚刚遇到了类似的问题，我自己的网站 HTML5 根本无法运行。没有错误信息，只是空白。

原因是 Windows7 N（欧盟 - 没有媒体播放器）。

安装 Windows Media Player 后，此问题（以及其他问题）已得到修复。希望对你有帮助:)

【讨论】：

你，先生，是我的上帝！我已经为此苦苦挣扎了好几天，您的回答解决了我的问题。一个问题：以二进制的名义，你是怎么弄明白的？
这是一个糟糕的解决方案：-/您是否有一个弹出窗口告诉您的最终用户安装 WMP？

【解决方案3】：

由于某种原因，它看起来在 Win7+IE10 中不起作用。其他一切看起来都不错。针对以下页面进行了测试，其中包括 ie.microsoft.com 测试。

http://ie.microsoft.com/testdrive/graphics/videoformatsupport/default.html http://www.w3.org/2010/05/video/mediaevents.html

Win7 IE9 - 好的

Win7 IE10 - 不

Win8 IE10 - 好的

Win7 IE11 - 好的

Win8 IE11 - 好的

MS 测试页面的 BrowserStack 屏幕截图。 http://www.browserstack.com/screenshots/9083c865675d0821ee8b1030a43da5fd36bff469

【讨论】：

【解决方案4】：

不过，根据caniuseit、mp4 is supported in IE9 and 10，我没有安装 IE10。

以下 html 在 IE9 和 Chrome 中适用于我，请注意您的视频文件必须与服务器上的 html 页面位于同一文件夹中（在此示例中）。

<!DOCTYPE html>
<html>
    <body>
        <video src="abc.mp4" width="640" height="480" preload controls></video>
    </body>
</html>

编辑：我已经安装了 IE10 并且可以在那里确认上述工作。

编辑： 由于 Firefox 不支持 mp4，而且旧版浏览器根本不支持原生视频，因此最好提供多种来源（格式），然后回退，通常使用 Flash 播放器.

<!DOCTYPE html>
<html>
    <body>
        <video width="640" height="480" preload controls>
            <!-- mp4 supported by Chrome & IE9/10 -->
            <source src="abc.mp4" type="video/mp4"></source>
            <!-- webm supported by Firefox -->
            <source src="abc.webm" type="video/webm"></source>

            <!-- last element in video is fall back for native video support, usually a flash player -->
            <object type="application/x-shockwave-flash ...>
                <!-- last element flash player is usual fall back for flash support, usually some "not supported text" -->
                <div>
                Your browser does not natively support flash and you do not have flast installed.
            </div>
            </object>
        </video>
    </body>
</html>

【讨论】：

GrayKing，感谢您的帮助。抱歉，花了这么长时间才回复您...如果对此线程有回复，我期待收到电子邮件通知。视频在 Chrome 中加载效果很好，因此路径对 MP4 来说看起来不错。我找到了一台装有 IE9 的机器，我发现它与 IE10 具有相同的白页（未注明错误）。
我把网站/页面放在另一台 Windows 服务器上；这是一台 32 位服务器，结果相同。最终我计划像你建议的那样添加后备，但我希望它首先与 IE10/IE9 一起使用。实际上我最终可能会使用 JWPlayer。 HTML5 视频测试是我试图找出 JWplayer 无法正常播放的原因的方法。它回退到 IE10 中的 Flash 播放器，但只播放音频，当点击全屏模式时，视频最终播放。全屏模式也在 Flash 模式下播放。我希望我能做到这一点。
听起来可能是 mp4 文件编码错误的问题。使用不同的文件是否会出现相同的行为？
我尝试了几个文件；我将一个文件发送到“JWPLayer”支持，当从他们的服务器（不是 IIS）提供服务时，它使用他们的播放器在 IE10 中播放良好似乎它必须是一个阻止 HTML5 视频的 IIS 设置，但我无法弄清楚它可能是什么。
哦，您是否已在 IIS 中将“video/mp4”作为 MIME 类型添加到站点中？默认情况下不存在。

【解决方案5】：

你可能遇到了Cannot play neither IE10 HTML5 video nor Modern UI apps video中提到的显卡驱动问题。

在 IE 中禁用 GPU 渲染：

Internet 选项 > 高级 > 加速图形 > 使用软件渲染而不是 GPU 渲染

然后看看它是否有效。

【讨论】：

【解决方案6】：

我在 IE10 播放 html5 视频时遇到了很多问题。我检查的最后一件事是正确的 oe：视频是 gzip 压缩的。检查你的服务器配置！！！

编辑： 要知道您的视频是否被服务器压缩，请使用网络代理嗅探器，例如Charles，甚至是 IE 的调试器，并检查视频文件请求的响应标头。如果你找到Content-Encoding:gzip，那么你应该检查你的服务器配置。在我的情况下，我必须在我的 .htaccess 文件中禁用视频文件的 gzip 压缩。

【讨论】：

我也有类似的问题，你能给我更多的信息吗？我应该在服务器上检查什么？

【解决方案7】：

这是我用于 html5 视频的代码：

<div>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="none" width="auto" height="auto"
poster="path/to/image.png"
data-setup='{"example_option":true, "autoplay": true}'>
    <source src="path/to/video.ogv" type='video/ogg' />
    <source src="path/to/video.webm" type='video/webm' />
    <source src="path/to/video.mp4" type='video/mp4' />
    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
    <object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["path/to/image.png", {"url": "path/to/video.flv","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="path/to/image.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
    </object>
</video>

这应该适用于所有设备/浏览器。我已经按特定顺序调用了wideos，以允许现代浏览器更快地加载它们（chrome 可以播放ogg/webm/mp4 - 从测试我的视频ogg/webm 似乎可以更快地加载它们mp4，因此它会减少缓冲时间）

【讨论】：

【解决方案8】：

我遇到了完全相同的问题。我最初的视频分辨率是 1920x1200。似乎IE10有问题。使用较低分辨率视频的第一次测试解决了这个问题。

【讨论】：