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

Internet Explorerは、ビデオ形式をタグで再生できるものとして認識しません<video>。「 /videos/clouds.mp4 」のようにビデオを直接開こうとすると、IEはWindowsMediaPlayerを使用してビデオを再生するためのダイアログを表示します。したがって、試すことができ、最も役立つ可能性が高いのは、次のようにファイルにビデオ形式を明示的に追加すること.htaccessです。

AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogv
于 2013-02-28T23:05:11.363 に答える
2

私はあなたの CodePen をフォークし、あなたのビデオ アセットを eClarify アセットに置き換えました。http://codepen.io/Lafinboy/pen/AhFltを参照してください。

ビデオ アセットのサイズ (ファイルと物理) を減らして、再度エクスポートすることをお勧めします。

于 2013-02-28T22:49:20.380 に答える