22

I am trying to get two different videos to play in one video element, but putting two sources only plays the first one. Should i do this with jQuery? Code(HTML):

<video autoplay loop id="bbgVid">
<source src="style/mpVideos/mpv1.mp4" type="video/mp4">
<source src="style/mpVideos/mpv2.mp4" type="video/mp4">
</video>
Jojo01
  • 1,269
  • 4
  • 14
  • 35
  • Why do you need it in one video tag? When can't you use 2 tags? – Mosh Feu Sep 01 '15 at 15:11
  • I want the video to be the background of the page. So having 2 videos under each other is not what i want. – Jojo01 Sep 01 '15 at 15:13
  • Still.. create 2 videos, set their position to `absolute` and place them wherever you want. – Mosh Feu Sep 01 '15 at 15:15
  • They would play at the same time, i want them to play one after each other in a loop. – Jojo01 Sep 01 '15 at 15:16
  • 2
    So use JavaScript: `firstVideo.addEventListener('ended',function(){ secondVideo.play(),false);` http://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes – Mosh Feu Sep 01 '15 at 15:20
  • 1
    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). – Alvaro Montoro Sep 01 '15 at 15:32

1 Answers1

35

As I mentioned in the comments, 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).

As in the question you mention only to have one video tag with the different sources, here is a possibility. The idea is the following:

  • Add an event listener to the end of the movie.
  • Change the video src with the src of the next source once the video is completed.
  • Note that this solution considers that all the source videos will be supported.

In JavaScript, it would be something like this:

var myvid = document.getElementById('myvideo');

myvid.addEventListener('ended', function(e) {
  // get the active source and the next video source.
  // I set it so if there's no next, it loops to the first one
  var activesource = document.querySelector("#myvideo source.active");
  var nextsource = document.querySelector("#myvideo source.active + source") || document.querySelector("#myvideo source:first-child");
  
  // deactivate current source, and activate next one
  activesource.className = "";
  nextsource.className = "active";
  
  // update the video source and play
  myvid.src = nextsource.src;
  myvid.play();
});
<video id="myvideo" width="320" height="240" controls style="background:black">
  <source class="active" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4" />
</video>

The videos are from the W3Schools HTML5 video page.

As specified by Kaiido in the comments, a simpler alternative would be to have the list of videos in an array in JavaScript and update the video source accordingly instead of having multiple sources directly under the video:

var myvid = document.getElementById('myvideo');
var myvids = [
  "http://www.w3schools.com/html/mov_bbb.mp4", 
  "http://www.w3schools.com/html/movie.mp4"
  ];
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();
});
<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black">
</video>

You can also see it working on this JSFiddle: http://jsfiddle.net/bnzqkpza/

Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
  • 1
    Won't it be much simpler to keep the urls in an array and just iterate it, without populating the html source with non-expected/non-working code and unnecessary DOM manipulation ? – Kaiido Sep 02 '15 at 03:33
  • It would be simpler. I tried to stick to the code in the question, but I'll add some code that does that. – Alvaro Montoro Sep 02 '15 at 11:07
  • 1
    just had to comment because i love your % array.length trick for looping! – Andrew Oct 31 '17 at 01:49
  • Hey I want to do exactly this snippet but in a React way. Does anyone have advice on how to modify it efficiently? – Big Guy Nov 15 '17 at 20:33
  • It shows a blip when a video ends, how to eliminate it? – Aamir Nakhwa May 04 '19 at 14:31
  • @AamirNakhwa I can't hear/see anything weird. Does it happen with these videos or with others? Do you have an example that I could see? – Alvaro Montoro May 04 '19 at 15:13
  • 1
    @AlvaroMontoro when 1st clip ends, it stopped for a while to load the next clip. I want to eliminate it and play multiple videos smoothly. – Aamir Nakhwa May 05 '19 at 08:56