如何在用户点击之前循环播放视频.然后播放次要视频并在次要完成后恢复到第一个视频，javascript，HTML

发布于06月28日

try 循环播放预告片，直到用户单击屏幕上的某个位置，然后应播放一次讲座视频，然后恢复到预告片.

我做错了什么？

<video id="mp4Source" autoplay loop controls width="100%" src="/assets/trailer.mp4" >

</video>

<button type="button" name="button" onclick="playLectureVid()"> Play Lecture Vid</button>

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();
    });
  }

推荐答案

只需在两个视频之间切换即可.

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;
}

<center>
  <button type="button" name="button" onclick="playLectureVid()"> Play Lecture Vid</button>
  <br>
  <video id="trailer" autoplay muted loop controls width="100%" src="https://jsoncompare.org/LearningContainer/SampleFiles/Video/MP4/Sample-MP4-Video-File-for-Testing.mp4"></video>
  <video id="lecture" controls width="100%" src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"></video>

</center>