2

所以我试图在我的投资组合网站上实现这个非常酷的效果，它是一个在背景 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;*/
}
4

2 回答 2

2

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

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

于 2013-02-28T22:49:20.380 回答
2

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

AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogv
于 2013-02-28T23:05:11.363 回答