Question

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

我能够在每个浏览器中使用它除了IE （以及iOS / Nexus，但我会找出那些静态图像后备）。

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

以下是我的网站： 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

我将您的CodePen分叉并用eClarify资产替换了您的视频资产，这证实了我对您的视频资产问题的怀疑。请参阅http://codepen.io/Lafinboy/pen/AhFlt。

我建议缩小视频资源的大小（文件和物理）并再次导出。

Answer 2

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

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

背景div中的视频不在IE上工作

2 个答案: