html - 背景 div 中的视频不适用于 IE

Question

所以我试图在我的投资组合网站上实现这种非常酷的效果，它是在背景 div 中播放的循环视频(无音频)。我从这个网站得到了这个想法:http://www.eclarify.com

我能够让它在所有浏览器中运行，IE 除外(还有 iOS/Nexus，但我会为它们找出一个静态图像回退)。

但是我可以看到在 eclarify 播放的视频在我的 IE 上，我找不到他们使用什么来启用该跨浏览器功能。

这是我的网站: http://leongaban.com | 我的 CodePen: http://codepen.io/leongaban/pen/IBpyb

HTML:

<div class="clouds">
    <video width="1920" height="1080" autoplay="autoplay" loop="loop" preload>
        <source src="videos/clouds.mp4" type="video/mp4" >
        <source src="videos/clouds.ogg" type="video/ogg" >
        <source src="videos/clouds.webm" type="video/webm" >
        <object data="videos/clouds.mp4" width="1920" height="1080">
            <param name="wmode" value="transparent">
            <param name="autoplay" value="true" >
            <param name="loop" value="true" >
            <embed src="videos/clouds.swf" width="1920" height="1080" wmode="transparent" >
        </object>
    </video> 
</div>

<header>
    <div id="main-nav">
        <ul>
            <li><a href="#content">Portfolio</a></li>
            <li><a href="#footer">Contact</a></li>
            <li><a href="#">Resume</a></li>
         </ul>
    </div>

    <div id="logo-title">
        <img src="images/leon_gaban.png" width="256" height="256" class="avatar" />

        <h1>Hello, I'm Leon Gaban</h1>
        <h2>Web Designer &amp; Developer</h2>
        <h3>I believe that successful design succeeds in telling the best story</h3>
    </div>
</header>

CSS:

div.clouds {
    position:absolute;
    z-index:1;
    margin:0 auto;
    width:100%;
    overflow: hidden;
}
div.clouds video, div.clouds object, div.clouds embed {
    /*width: 100%;*/
    width: 2000px;
    height: auto;
    min-width: 720px;
    margin: 0 auto;  
}

header {
    width: 100%;
    height: 650px;
    margin: 0 auto;
    position:relative;
    z-index:2;
    /*background: #ededed;*/
    /*border-bottom: 1px solid #ccc;*/
}

Answer 1

Internet Explorer 无法将视频格式识别为他可以在 <video> 中播放的内容-标签。如果您尝试直接打开视频，例如“/videos/clouds.mp4 ”，IE 显示一个对话框以使用 Windows Media Player 播放它。所以你可以尝试并且最有可能帮助的是在你的 .htaccess 中明确添加视频格式。 -像这样的文件:

AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogv