1

我在 HTML 页面中创建了一个简单的视频元素。这里的代码：

<!DOCTYPE html>
<html lang="ar">
    <head>
    <meta charset="utf-8"/>
    <script src="js/jquery-1.8.3.min.js"></script>

        <style>
            body{
                background:gray; 
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            #vid_container {position:absolute;left:50%;top:50%;visibility:visible;text-align:center;z-index:501;}
            #vid_background {position:absolute;left:-350px;top:-270px;width:700px;height:540px;background:url(datas/vid_bg.png);z-index:501;}
            #vid_loader {position:absolute;left:-320px;top:-240px;text-align:center;z-index:502;}
            #vid_button {position:absolute;left:-346px;top:-266px;width:30px;height:30px;background:url(datas/vid_btn.png);z-index:503;cursor:pointer;}


        </style>
    </head>
    <body>

        <div id='vid_container'>

        <div id='vid_background'></div>

        <video id='vid_loader' width="640" height="480" preload controls>
            <source src="my_video.mp4" type="video/mp4">
        </video>

        <div id='vid_button'></div>

        </div>

    </body>
</html>

当我在本地（我的计算机）上测试 INTERNET EXPLORER 中的代码时，它工作正常并且电影加载。但是当我在我的 FTP 中托管它并通过互联网进行测试时，它不会加载（它在所有其他浏览器上加载）

你可以测试你自己：（用其他浏览器打开这个链接，它可以正常工作，但用ie它不是）

http://ajnadeen-me.com/eBook/vidbug/index.html

影片是 MP4 压缩 H.264。

谢谢 。

4

3 回答 3

1

Web 服务器正在使用不正确的 MIME 类型提供视频。当前的 MIME 类型是video/mpeg（不适用于 IE9）。MP4 视频的 MIME 内容类型在RFC 4337中定义- 另请参阅指向此 ISO 规则的特定 H.264 编码的段落- 它是video/mp4. 有关视频服务内容类型的更多信息，请点击此处。

于 2013-01-07T13:45:16.413 回答
1

首先，您应该确保<video>Internet Explorer 支持 HTML5 标记。只有 Internet Explorer 9 本身支持它，请参见此处，因此如果您希望它也可以与以前的版本一起使用，您需要将 HTML5 标记的支持添加到旧版本的 Internet Explorer 中。如果您还没有这样做，您可以使用html5shiv。head只需在您的网页中添加此代码：

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

现在你可以使用video标签了。我给你一个解决方案，首先使用视频 html5 标签，如果失败，它会使用 Flash 视频播放器加载视频，而无需使用 javascript 或浏览器嗅探。然后，即使失败，也会显示图像占位符（海报），您可以允许网站的访问者下载视频。如果您对最后一部分不感兴趣，您可以将其从代码中删除。正如您在代码中看到的，我建议您不仅以mp4格式创建视频，而且还ogg以webm.

格式兼容性：

  • Internet Explorer 9+ 支持 Mp4，但不支持 WebM 和 Ogg。
  • Chrome 6+ 支持所有三种格式。
  • Firefox 3.6+ 支持 WebM 和 Ogg，但不支持 Mp4。
  • Safari 5+ 支持 Mp4 但不支持 WebM 和 Ogg。
  • Opera 10.6+ 支持 WebM 和 Ogg 但不支持 Mp4。

这就是为什么您应该包括所有三种格式。

我删除了该preload属性，因为 Internet Explorer 不支持它。

这里的HTML代码是：

<video controls poster="poster.jpg" width="640" height="480">
    <source src="my_video.mp4" type="video/mp4" />
    <source src="my_video.webm" type="video/webm" />
    <source src="my_video.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="480">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" value="config={'playlist':['poster.jpg',{'url':'my_video.mp4','autoPlay':false}]}" />
        <img alt="Video" src="poster.jpg" width="640" height="480" title="No video playback capabilities, please download the video below" />
    </object>
</video>
<p>
    <strong>Download video:</strong> <a href="my_video.mp4">MP4 format</a> | <a href="my_video.ogv">Ogg format</a> | <a href="my_video.webm">WebM format</a>
</p>

服务器支持：

如果服务器上的 MIME 类型设置不正确，您可能无法播放视频。如果您使用 Apache 服务器，您可以添加视频文件的扩展名或/etc/apache通过.AddTypehttpd.conf

对于奥格：

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

对于 WebM：

AddType video/webm .webm

对于 MP4：

AddType video/mp4 .mp4

我使用 Internet Explorer 9 检查了 w3schools 上的示例。如果我切换到 Internet Explorer 7 或 Internet Explorer 8，则不支持它。（因为我之前谈到的 HTML5 视频标签兼容性问题）。同样，您可以通过使用 htmlshiv 来解决这个问题。

即使您使用 Internet Explorer 9，它也有可能以Quirks 模式（兼容模式，即 ie7 或 ie8）显示页面。您可以通过确保不使用<!DOCTYPE html>任何 xml prolog 来避免这种情况。

此外，您可以通过添加以下内容将浏览器仿真强制为最新版本的 Internet Explorer：

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

在head您的 HTML 页面中。

于 2013-01-07T08:53:43.090 回答
1

您的服务器可能没有为 MP4 视频设置正确的 MIME 类型。请参阅第 2 点：HTML5 多媒体疑难解答。

于 2013-01-07T09:09:38.660 回答