57

画面全体（背景）に自動的に拡大する画像ではなく、ビデオを背景として使用したいと思います。

また、ビデオと画像を回転させて、ランダムなビデオ/画像が任意の順序で表示されるようにします。

また、ビデオの再生を遅らせる方法を知っておくと、サイトが読み込まれてから30秒後にビデオが1回だけ再生されるようになります。

どうも！

4

3 に答える 3

36

Take a look at my jquery videoBG plugin

http://syddev.com/jquery.videoBG/

Make any HTML5 video a site background... has an image fallback for browsers that don't support html5

Really easy to use

Let me know if you need any help.

于 2011-03-15T04:06:41.203 に答える
26

まず、HTML マークアップは次のようになります。

<video id="awesome_video" src="first_video.mp4" autoplay />

次に、JavaScript コードは次のようになります。

<script type="text/javascript">
  var index = 1,
      playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('awesome_video');

  video.addEventListener('ended', rotate_video, false);

  function rotate_video() {
    video.setAttribute('src', playlist[index]);
    video.load();
    index++;
    if (index >= playlist.length) { index = 0; }
  }
</script>

そして最後になりましたが、CSS:

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

これにより、最初の動画の再生をすぐに開始し、JavaScript 変数で定義された再生リストを反復処理する動画要素がページに作成されます。CSS のマイレージは、サイトの残りの部分の CSS によって異なる場合がありますが、基本的なページでは 100% の幅/高さが必要です。

于 2010-09-27T03:09:52.240 に答える
8

ビデオを背景として、ブラウザの幅または高さに引き伸ばすための解決策があるかもしれません（ただし、ビデオはアスペクト比を維持しますが、まだ解決策を見つけることができませんでした.）：

body タグの直後に動画を挿入しstyle="width:100%;"ます。直後に、「bodydummy」タグを付けます。

<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>    
</video>

<img id="bgImg" src="videos/poster.png" />

<!-- This image stretches exactly to the browser width/height and lies behind the video-->

<div id="bodyDummy">

すべてのコンテンツをbodydummy-div 内に配置し、次のように z-index を CSS に正しく配置します。

#bgImg{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#bgVideo{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#bodyDummy{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: auto;
    width: 100%;
    height: 100%;
}

私が助けてくれることを願っています。ビデオがアスペクト比を維持しないという解決策を見つけたら教えてください。ブラウザ ウィンドウ全体に表示されるので、bgimage を配置する必要はありません。

于 2011-03-01T13:24:05.013 に答える