CODEWITHSUNDEEP
javascripthtmlvideoplaylist
Camilo Rincon
Camilo Rincon

Reputation: 111

Background Videos HTML5

I want to create a background with differents videos, when the user refresh the page change to other video.

Now i have this, maybe with javascript i can do it but i don't know how.

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

Upvotes: 0

Views: 637

Answers (2)

Kaiido
Kaiido

Reputation: 136986

As @zmehboob said, you will have to make a list of videos to pick one randomly.

For this purpose, I'm using an object that contains the different available types for creating source elements, then I pick a random one for src before iterating through its extensions for sourceelements.

Here is some code (Vanilla): 

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

Upvotes: 1

zmehboob
zmehboob

Reputation: 99

So basically you'll want to run the function at pageload (wrap it in document.ready).

You will want a srcsList array which will hold all your video sources (don't include the file extension).

You want to select a random number limited by the number of sources you have.

Finally you will update the src for your mp4 and webm sources so they reference the new random 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');

Upvotes: 0

Related Questions