视频在背景div不工作在IE

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

我能得到它在每个浏览器工作，除了IE（以及与iOS /联系，但我会找出那些静态图像回退）。

但是我可以在我的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;*/ 
}

来源

2013-02-28 Leon Gaban

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

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

来源

2013-02-28 23:05:11 insertusernamehere

我今天也会加上！也尝试了我的内部IE浏览器的mp4链接，我真的看到它加载在浏览器中，只有它滞后可怕。看起来它已暂停了几秒钟，我会尝试htaccess文件，并减少文件大小 – 2013-02-28 23:12:47

IE9可以非常容易处理视频。特别是关于页面上的视频标记数量，视频格式，文件大小，分辨率等以及播放能力在系统之间差异极大，并且取决于带宽。 – insertusernamehere 2013-02-28 23:18:06

嗨@insertusername这里我的htaccess文件看起来像这样吗？我以前从来没有提出一个：<文件〜 “^ \（htaccess的| htpasswd的）$。”> 所有选项-Indexes否认为了否认，让将AddType视频/ MP4的MP4 将AddType视频/ WEBM .webm AddType视频/ ogg .ogv – 2013-03-01 04:43:48

我与eClarify资产，证实了我的怀疑，分叉的CodePen和更换视频资源我们与您的视频资产问题。见http://codepen.io/Lafinboy/pen/AhFlt。

我会建议减小视频资产的大小（文件和物理）并再次导出它们。

来源

2013-02-28 22:49:20 Lafinboy

谢谢！我会尽快尝试一下：D – 2013-02-28 23:10:35

嗯我已经重新输出了视频，现在它的尺寸比eCalrify的视频小。它不在我家里的IE中工作，但我现在看到它在我的CodePen中工作：http://codepen.io/leongaban/pen/IBpyb这么奇怪，明天就会在我的电脑上检查！ – 2013-03-01 04:56:21

视频在背景div不工作在IE

回答

相关问题