Randomized HTML5 background video on page load/refresh

Question

I've implemented an HTML5 video as a full screen background video. Each time someone opens the page or refreshes it, I'd like to have the background video randomly change to another one (I'll have about 3 or 4 videos that could be chosen.) Until the page is refreshed or reopened just that one video would play, though. It wouldn't loop through the 3 or 4 videos if that makes sense.

This question was flagged as a duplicate for another, which gave me part of the answer.

var videoList = ["video1", "video2", "video3", "video4", "video5"];
videoList.sort(function (a, b) {
return Math.random() > 0.5 ? -1 : 1;

My question now is, how do I 'tie' these video files to the source of the html video?

<video autoplay  poster="" id="bgvid" loop>
    <source src="?" type="video/webm">
    <source src="?" type="video/mp4">
</video>

I have the html video portion, but I don't write javascript so I'm not even sure where to begin. This is kind of a last minute task given to me by my director. — crarls, Oct 01 '15 at 17:32
I see there are tutorials for randomized background images, but can't find any for videos and they don't seem to translate directly enough for me to try to customize. — crarls, Oct 01 '15 at 17:34
Flagging as duplicate: http://stackoverflow.com/questions/18751995/how-to-randomize-video-playlist-in-javascript-html5 — Rick Burns, Oct 01 '15 at 17:37
@UncleRico How is this a duplicate? That's for a video playlist. This is for one video. — crarls, Oct 01 '15 at 17:39
It randomly plays a video from a set of videos using javascript and HTML5. Exactly what your question is. — Rick Burns, Oct 01 '15 at 17:40
@UncleRico Do you think you could help me after my above edit? — crarls, Oct 01 '15 at 17:49

Rick Burns · Accepted Answer · 2015-10-01T18:47:47.790

0

Since the edit of the question, it isn't a duplicate of the other that I mentioned in the comments. So here's an attempt!

This should hopefully be what you want (working fiddle here: http://jsfiddle.net/bccbx53p/2/):

HTML (with text overlaying the background video, maximize the right panel to see the video playing behind the text):

<div id="videoplayer" width="600" height="800"></div>

<H1>TEST TEXT OVERLAYING THE BACKGROUND</H1>

JavaScript:

var videoList = ["http://www.w3schools.com/html/mov_bbb.mp4", "http://media.sublimevideo.net/v/next15-sublime_360p.mp4"];
videoList.sort(function(a, b) {return 0.5 - Math.random()});

$("#videoplayer").html("<video id='rawvideo' autoplay poster='' id='bgvid' loop><source src='" + videoList[0] + "' type='video/mp4'></video>");

CSS:

#videoplayer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

#rawvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

edited Oct 01 '15 at 18:47

answered Oct 01 '15 at 18:03

Rick Burns

1,538
16
20

why the `0.5 - Math.random()` instead of just `Math.random()` ? – John Boker Oct 01 '15 at 18:06
@JohnBoker, here's an interesting read on that piece of code: http://stackoverflow.com/questions/962802/is-it-correct-to-use-javascript-array-sort-method-for-shuffling – Rick Burns Oct 01 '15 at 18:13
1

ah i forgot the sort method doesn't sort by the value, but whether the value returned is negative, positive or zero. – John Boker Oct 01 '15 at 18:21
@UncleRico Thanks for your response! Is there a way for me to continue to use my video element instead of having to create a videoplayer div? Or is there a way to make sure these videos are full screen background videos? – crarls Oct 01 '15 at 18:39
@crarls, to get full screen background videos you'll just need to apply the proper CSS to the div and it will work. I would look here (http://slicejack.com/creating-a-fullscreen-html5-video-background-with-css/), you just need to properly id the `
` and `
– Rick Burns Oct 01 '15 at 18:43
@crarls, as for reusing your video element, I don't think you'll be able to because javascript runs after the browser is finished loading and `autoplay` will want to start that on a `src` that doesn't exist yet. – Rick Burns Oct 01 '15 at 18:44
@crarls, added background video with overlaying text to the fiddle and answer. – Rick Burns Oct 01 '15 at 18:48
@UncleRico I appreciate the help! Is there anything else I should add to the javascript file besides what is in the jsfiddle? I've replaced my existing html code with yours and copy pasted the javascript into an empty js file (the link between the two files is correct as well). The videos aren't showing though, so I'm wondering what I'm missing. – crarls Oct 01 '15 at 18:54
@crarls, you have to have a reference to jQuery and the javascript needs to be within the jQuery DOM ready sandwich. – Rick Burns Oct 01 '15 at 20:14
Sorry for the late response to all of this. I got this feature working based on your help. Thanks so much, @UncleRico. – crarls Oct 05 '15 at 19:02

Randomized HTML5 background video on page load/refresh

1 Answers1