background html5,javascript - Background Videos HTML5 - Stack Overflow

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

}

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.