javascript - 背景视频 HTML5

Question

我想创建一个包含不同视频的背景，当用户刷新页面时更改为其他视频。

现在我有了这个，也许用 javascript 我可以做到，但我不知道怎么做。

   <video loop="loop" preload="auto" muted="" autoplay="" poster="/templates/smartone/images/video/fondo.jpg" id="bgvid">
<source src="/templates/smartone/images/video/fondo1.mp4" type="video/mp4">  
<source src="/templates/smartone/images/video/fondo1.webm" type="video/webm">
</video>

Answer 1

正如 @zmehboob 所说，您必须制作一个视频列表才能随机选择一个。

为此，我使用一个 object，其中包含用于创建 source 元素的不同可用类型，然后在迭代其之前为 src 选择一个随机类型source元素的扩展。

这是一些代码(普通):

//  first create the list with extensions as parameters
var videoList = {
    'http://media.w3.org/2010/05/sintel/trailer': ['mp4', 'ogv'],
    'http://media.w3.org/2010/05/bunny/movie': ['mp4', 'ogv']
  };

function create_BG_Video() {
  //create the video element and its source
  var el = document.createElement('video');
  var source = document.createElement('source');
  // here is the magic that takes a random key in videoList object
  var k = randomKey(videoList);
  //iterate through each extension to make a new source type
  for (m in videoList[k]) {
    source.src = k + '.' + videoList[k][m];
    var type;
    //as ogg video may be with a '.ogv' extension, we have to watch for it      
    (videoList[k][m] == 'ogv') ? type = 'ogg': type = videoList[k][m];
    source.type = "video/" + type;
    el.appendChild(source);
  }
  el.className = 'bg_video';
  el.width = window.innerWidth;
  el.height = window.innerHeight;
  el.setAttribute('autoplay', 'true');
  //Set it as the first element in our body
  document.body.insertBefore(el, document.body.childNodes[0]);
}

  // if it is the only used instance, it could be placed at start of the function
var randomKey = function(obj) {
  // Get all the keys in obj (here videoList)
  var k = Object.keys(obj)
  // Here '<< 0' is equivalent to Math.floor()
  return k[k.length * Math.random() << 0];
};

window.onload = create_BG_Video;

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
.bg_video {
  height: 100%;
  width: 100%;
  margin: 0;
  top: 0;
  position: fixed;
  z-index: -999;
  background: #000;
}
#content {
  margin-top: 15%;
  color: #FFF;
}

<div id='content'>
  <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become
  television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p>
  <img src="http://lorempixel.com/300/200" />
</div>