how do I loop video until user clicks. then play secondary video and revert to first video once secondary has finished, javascript, HTML

Question

Trying to get a trailer looped until the user clicks somewhere on the screen after which the lecture video is supposed to play once and then revert to the trailer. Managed to find a similar question here on StackOverflow, unfortunately, I'm unable to get it to fully work. The trailer loops and when I click on the button the lecture video plays but does not start the trailer video and instead just loops the lecture video.

What am I doing wrong here?





function playLectureVid(){
    var video =  document.getElementById("mp4Source");
    video.src = '/assets/lecture.mp4';
    video.load();
    video.play();
    video.addEventListener("ended", function(e) {
      e.currentTarget.removeEventListener(e.type, handler);
      video.src = '/assets/trailer.mp4';
      video.load();
      video.play();
    });
  }

user_3807365 · Answer

Just toggle between two videos.

var trailer = document.getElementById("trailer");
var lecture = document.getElementById("lecture");

function playLectureVid() {
  lecture.style.display = 'block';
  trailer.style.display = 'none';
  trailer.pause();
  lecture.play();
}

lecture.addEventListener("ended", function(e) {
  trailer.style.display = 'block';
  lecture.style.display = 'none';
  lecture.pause();
  trailer.play();
});

video {
  width: 400px;
}

#lecture {
  display: none;
}

user_13294432 · Answer

Instead of using video.addEventListener("ended",, you can use video.onend = () => {code here}. Then, because this is called every time the video ends, insert these lines to the top of your function:

if (trailerLoaded) return
trailerLoaded = true

and add this at the top of playLectureVid:

var trailerLoaded = false

This will make it so that the video will not be reloaded every time it ends.

how do I loop video until user clicks. then play secondary video and revert to first video once secondary has finished, javascript, HTML

2 Answers