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

时间:2015-05-27 06:43:09

标签: video web

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

1 个答案:

答案 0 :(得分:0)

您的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%; }