web-dev-qa-db-ja.com

サイトの背景としてのビデオ？ HTML 5

画面全体（背景）に自動的に拡大する画像の代わりに、ビデオを背景として使用したい。

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

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

どうも！

htmlvideohtml5backgroundhtml5-video
56
Roland

私のjquery videoBGプラグインを見てください

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

HTML5ビデオをサイトの背景にする... html5をサポートしないブラウザーの画像フォールバックがあります

本当に使いやすい

ヘルプが必要な場合はお知らせください。

37
sydlawrence

まず、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％の幅/高さは基本ページでそれを行う必要があります。

25
Jey Balachandran

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

style="width:100%;"を使用して、bodyタグの直後にビデオを配置します。あとがきに、「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%;
}

私が助けてくれることを願っています。ビデオがnotアスペクト比を維持するソリューションを見つけることができたら、ブラウザウィンドウ全体を埋めることができるので、bgimageを配置する必要はありません。

8
moritz