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选择一个随机类型。 1}}的元素。

这是一些代码（Vanilla）：

＆＃13;

source

＆＃13;

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

＆＃13;

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;
}

＆＃13;

Answer 2

所以基本上你要在pageload上运行该函数（将它包装在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');

背景视频HTML5

2 个答案: