像www.violetstreet.com这样的网站如何在网站上放置视频？

Question

像violetstreet.com和vine.co这样的网站将视频放在背景中，文本和搜索按钮放在它上面。我该怎么办？他们使用的视频格式也不是.gif。

Answer 1

您的HTML：

<video id="bg_video" src="video.mp4" autoplay />

的Javascript

<script type="text/javascript">


var index = 1,
      playlist = ['video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('bg_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：

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