CODEWITHSUNDEEP
htmlcssloopsvideobackground
Casey Smith
Casey Smith

Reputation: 13

Video Background Only Playing 1 Video

I'm putting together a website and I have implemented a Full-screen Video Background. The problem is that I can't get it to play the next video. It only plays the first video it sees. I have tried other video formats with no prevail. Please help!

/*CSS*/

video#full-screen {
            position: absolute; 
            right: 0; 
            bottom: 0;
            min-width: 100%;
            min-height: 100%; 
            width: auto; 
            height: auto; 
            z-index: -1; 
            filter: hue(100%);
            }
<!--HTML-->

<video playsinline autoplay muted loop poster="assets/Logo.png" id="full-screen">
            <source src="video/home-video.webm" type="video/webm"/>
            <source src="video/home-video.mp4" type="video/mp4"/>
    </video>

Upvotes: 0

Views: 316

Answers (1)

Rohin Gopalakrishnan
Rohin Gopalakrishnan

Reputation: 664

The list of sources is not a playlist but a set of alternative sources. Once the browser finds one that is supported, the rest are ignored. You'll have to use JavaScript to achieve what you want (independently of doing it with one or two video tags).

You could have list of videos in an array in JavaScript and update the video source accordingly instead of having multiple sources directly under the video:

Add the following within your script tag and it should work for you. 

var myvid = document.getElementById('full-screen');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
   //replace this array with the videos you would like to play next

var activeVideo = 0;

myvid.addEventListener('ended', function(e) {
  // update the new active video index
  activeVideo = (++activeVideo) % myvids.length;

  // update the video source and play
  myvid.src = myvids[activeVideo];
  myvid.play();
});

This JavaScript snippet will automatically change your video src to the next one in the array.

You can see this working on this JSFiddle - http://jsfiddle.net/2976jx1s/

Hope this helps!

Upvotes: 1

Related Questions