CODEWITHSUNDEEP
javascripthtmlvideo
user15280052
user15280052

Reputation: 1

Javascript - Play two videos, one after the other, the second stay in a loop

Steps:

The first video play, when eds, the second video appears and play, when the second ends, play again the second (over and over again in a loop).

example:

Loop

html

<video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black">
</video>

js

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 active video index
  activeVideo = (++activeVideo) % myvids.length;

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

http://jsfiddle.net/bnzqkpza/

Upvotes: 0

Views: 824

Answers (1)

mrtechtroid
mrtechtroid

Reputation: 708

You can achieve the following using a if statement in your event listener

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) {
    if (activeVideo == 0){activeVideo = 1}
  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>

Upvotes: 2

Related Questions