背景视频 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 选择一个随机类型，然后遍历其扩展 sourceelements。

这是一些代码（原版）：

//  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>

Answer 2

所以基本上你会希望在页面加载时运行该函数（将它包装在 document.ready 中）。

您将需要一个 srcsList 数组来保存您的所有视频源（不包括文件扩展名）。

您想选择一个受您拥有的来源数量限制的随机数。

最后，您将更新 mp4 和 webm 源的 src，以便它们引用新的随机 src。

var srcsList = ["/templates/smartone/images/video/fondo1", "/templates/smartone/images/video/fondo2", "/templates/smartone/images/video/fondo3"];
var randomInt = Math.floor(Math.random() * srcsList.length);
var randomSrc = srcsList[randomInt];
$('[type="video/mp4"]').attr('src', randomSrc + '.mp4');
$('[type="video/webm"]').attr('src', randomSrc + '.webm');