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


0 Answers

まず、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%幅/高さは基本ページで行います。

Question

私は自動的に画面全体(背景)に伸びる画像ではなく、背景としてビデオを使用したいと思います。

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

ビデオの再生を遅らせる方法も知っていると良いでしょう。そのため、ビデオはサイトがロードされてから30秒後に再生されます。

どうも!




Related